Vue 去除路径中的#号


Posted in Javascript onApril 19, 2018

在开发过程中发现路径中带有/#/的标示,而且还去不掉,很丑陋。

众所周知,vue-router有两种模式,hash模式和history模式。

带#的则是hash模式。

将router中的mode设置为history就可以了

Vue 去除路径中的#号

接下来有个问题,界面一刷新,就变404了!!!!

网上搜了下,需要对后端环境进行一个配置。

这里只列举nginx的配置,其他的配置点击这里去官网看

先配置config/index.js

修改assetsPublicPath为根目录

module.exports = {
  build: {
      env: require('./prod.env'),
      index: path.resolve(__dirname, '../dist/index.html'),
      assetsRoot: path.resolve(__dirname, '../dist'),
      assetsSubDirectory: 'static',
      assetsPublicPath: '/',   // hash 模式会默认的在此处 添加为 assetsPublicPath: './'
      productionSourceMap: true,
      ...
    }
}

然后配置nignx

server {
    listen 0.0.0.0:12345;
    location / {
        root /home/我的应用跟目录;
        try_files $uri $uri/ /index.html =404;  // 这个是重点
    }
    error_page 404 /index.html
}

Url再也没有#了,多完美

总结

以上所述是小编给大家介绍的Vue 去除路径中的#号,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js输出阴历、阳历、年份、月份、周示例代码
Jan 29 Javascript
JQuery+Ajax无刷新分页的实例代码
Feb 08 Javascript
require.js深入了解 require.js特性介绍
Sep 04 Javascript
jQuery中scrollTop()方法用法实例
Jan 16 Javascript
纯javascript实现自动发送邮件
Oct 21 Javascript
jQuery实现两个select控件的互移操作
Dec 22 Javascript
JavaScript 函数的定义-调用、注意事项
Apr 16 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
Sep 10 Javascript
深入浅析Vue.js中 computed和methods不同机制
Mar 22 Javascript
vue插件draggable实现拖拽移动图片顺序
Dec 01 Javascript
JavaScript Array对象使用方法解析
Sep 24 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
Jul 20 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
Apr 19 #Javascript
基于JS实现html中placeholder属性提示文字效果示例
Apr 19 #Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
Apr 19 #Javascript
JS使用setInterval实现的简单计时器功能示例
Apr 19 #Javascript
vue 实现通过手机发送短信验证码注册功能
Apr 19 #Javascript
详解react-redux插件入门
Apr 19 #Javascript
vuex state及mapState的基础用法详解
Apr 19 #Javascript
You might like
一个ftp类(ini.php)
2006/10/09 PHP
php MYSQL 数据备份类
2009/06/19 PHP
奇怪的PHP引用效率问题分析
2012/03/23 PHP
thinkPHP使用post方式查询时分页失效的解决方法
2015/12/09 PHP
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
JavaScript 浏览器验证代码(来自discuz)
2010/07/17 Javascript
jQuery实现冻结表头的方法
2015/03/09 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
2016/01/12 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
2017/02/28 Javascript
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
Vue中的vue-resource示例详解
2018/11/02 Javascript
Vue 之孙组件向爷组件通信的实现
2019/04/23 Javascript
vue分页器组件编写方法详解
2019/06/28 Javascript
Vue中对iframe实现keep alive无刷新的方法
2019/07/23 Javascript
js实现聊天对话框
2020/02/08 Javascript
ES6 Symbol在对象中的作用实例分析
2020/06/06 Javascript
Vue中引入svg图标的两种方式
2021/01/14 Vue.js
python脚本实现查找webshell的方法
2014/07/31 Python
python实现将内容分行输出
2015/11/05 Python
Python编程实现的简单Web服务器示例
2017/06/22 Python
Ubuntu下Python2与Python3的共存问题
2018/10/31 Python
Python简单处理坐标排序问题示例
2019/07/11 Python
python切片的步进、添加、连接简单操作示例
2019/07/11 Python
10个Python面试常问的问题(小结)
2019/11/20 Python
PyTorch实现ResNet50、ResNet101和ResNet152示例
2020/01/14 Python
Pytorch模型转onnx模型实例
2020/01/15 Python
基于Python实现视频的人脸融合功能
2020/06/12 Python
使用python将微信image下.dat文件解密为.png的方法
2020/11/30 Python
定制别致的瑜伽垫:Sugarmat
2019/06/21 全球购物
2014庆六一活动方案
2014/03/02 职场文书
农民工工资支付承诺函
2014/03/31 职场文书
2014年协会工作总结
2014/11/22 职场文书
2019年大学生学年自我鉴定!
2019/03/25 职场文书
七年级上册生物的课件
2019/08/07 职场文书
nginx日志格式分析和修改
2022/04/28 Servers
js面向对象编程OOP及函数式编程FP区别
2022/07/07 Javascript