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 相关文章推荐
提交表单时执行func方法实现代码
Mar 17 Javascript
jquery自定义函数的多种方法
Jan 09 Javascript
node.js中的fs.fstat方法使用说明
Dec 15 Javascript
浅谈Javascript中substr和substring的区别
Sep 30 Javascript
JavaScript中判断数据类型的方法总结
May 24 Javascript
功能强大的Bootstrap组件(结合js)
Aug 03 Javascript
canvas绘制多边形
Feb 24 Javascript
Vuex模块化实现待办事项的状态管理
Mar 15 Javascript
Vue 解决多级动态面包屑导航的问题
Nov 04 Javascript
js实现缓动动画
Nov 25 Javascript
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 Vue.js
关于React Native使用axios进行网络请求的方法
Aug 02 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
Smarty安装配置方法
2008/04/10 PHP
PHP的PDO操作简单示例
2016/03/30 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
JavaScript方法和技巧大全
2006/12/27 Javascript
一个小型js框架myJSFrame附API使用帮助
2008/06/28 Javascript
javascript json 新手入门文档
2009/12/03 Javascript
说说JSON和JSONP 也许你会豁然开朗
2012/09/02 Javascript
JS+JSP checkBox 全选具体实现
2014/01/02 Javascript
javascript几个易错点记录
2014/11/26 Javascript
node.js中的fs.unlink方法使用说明
2014/12/15 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
2015/09/30 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
2016/08/03 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
2016/09/27 Javascript
使用Bootstrap打造特色进度条效果
2017/05/02 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
2017/05/26 Javascript
JavaScript中使用Async实现异步控制
2017/08/15 Javascript
利用ECharts.js画K线图的方法示例
2018/01/10 Javascript
vue页面离开后执行函数的实例
2018/03/13 Javascript
详解ES7 Decorator 入门解析
2019/02/18 Javascript
性能优化篇之Webpack构建速度优化的建议
2019/04/03 Javascript
Fetch超时设置与终止请求详解
2019/05/18 Javascript
jQuery+ajax实现批量删除功能完整示例
2019/06/06 jQuery
vue实现短信验证码登录功能(流程详解)
2019/12/10 Javascript
python继承和抽象类的实现方法
2015/01/14 Python
Python使用shelve模块实现简单数据存储的方法
2015/05/20 Python
Python生成器以及应用实例解析
2018/02/08 Python
CSS3 画基本图形,圆形、椭圆形、三角形等
2016/09/20 HTML / CSS
阿联酋网上花店:Ferns N Petals
2018/02/14 全球购物
武汉瑞得软件笔试题
2015/10/27 面试题
办公室人员先进事迹
2014/01/27 职场文书
2014第二批党员干部对照“四风”找差距检查材料思想汇报
2014/09/18 职场文书
幼儿教师年度个人总结
2015/02/05 职场文书
庆祝教师节活动总结
2015/03/23 职场文书
2019大学生实习报告
2019/06/21 职场文书
2019财务毕业实习报告
2019/06/27 职场文书
导游词之铁岭象牙山
2019/12/06 职场文书