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 相关文章推荐
jQuery.fn和jQuery.prototype区别介绍
Oct 05 Javascript
javascript预加载图片、css、js的方法示例介绍
Oct 14 Javascript
jsPDF生成pdf后在网页展示实例
Jan 16 Javascript
jquery操作HTML5 的data-*的用法实例分享
Aug 17 Javascript
jQuery封装的tab选项卡插件分享
Jun 16 Javascript
网页收藏夹显示ICO图标(代码少)
Aug 04 Javascript
js插件Jcrop自定义截取图片功能
Oct 14 Javascript
Javascript 判断两个IP是否在同一网段实例代码
Nov 28 Javascript
利用express启动一个server服务的方法
Sep 17 Javascript
JavaScript面向对象继承原理与实现方法分析
Aug 09 Javascript
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
关于element的表单组件整理笔记
Feb 05 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
PHP 柱状图实现代码
2009/12/04 PHP
php自动给网址加上链接的方法
2015/06/02 PHP
优化WordPress的Google字体以加速国内服务器上的运行
2015/11/24 PHP
深入理解Javascript动态方法调用与参数修改的问题
2013/12/10 Javascript
javascript动态向网页中添加表格实现代码
2014/02/19 Javascript
函数式 JavaScript(一)简介
2014/07/07 Javascript
JavaScript的jQuery库中function的存在和参数问题
2015/08/13 Javascript
jquery实现模拟百分比进度条渐变效果代码
2015/10/29 Javascript
谈一谈JS消息机制和事件机制的理解
2016/04/14 Javascript
AngularJS入门教程之AngularJS 模板
2016/08/18 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
2016/11/22 Javascript
javascript判断firebug是否开启的方法
2016/11/23 Javascript
jQuery-mobile事件监听与用法详解
2016/11/23 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
2017/05/02 Javascript
Bootstrap输入框组件使用详解
2017/06/09 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
2018/06/22 Javascript
优雅的elementUI table单元格可编辑实现方法详解
2018/12/23 Javascript
Ajax请求时无法重定向的问题解决代码详解
2019/06/21 Javascript
使用localStorage替代cookie做本地存储
2019/09/25 Javascript
解决ant Design Search无法输入内容的问题
2020/10/29 Javascript
在python中实现调用可执行文件.exe的3种方法
2019/07/07 Python
Python bytes string相互转换过程解析
2020/03/05 Python
HTML5 本地存储实现购物车功能
2017/09/07 HTML / CSS
采用怎样的方法保证数据的完整性
2013/12/02 面试题
在Ajax应用中信息是如何在浏览器和服务器之间传递的
2016/05/31 面试题
仓库管理专业个人的自我评价
2013/12/30 职场文书
公司庆典活动邀请函
2014/01/09 职场文书
同学会邀请书大全
2014/01/12 职场文书
员工三分钟演讲稿
2014/08/19 职场文书
教师党员群众路线教育实践活动心得体会
2014/11/04 职场文书
委托书英文
2015/01/28 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书
优秀学生干部主要事迹材料
2015/11/04 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书