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打包类,基本可以实现所有的滚动效果,太强了
Dec 08 Javascript
Javascript 中介者模式实例
Dec 16 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
Sep 26 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
Aug 22 Javascript
JQuery对id中含有特殊字符的转义处理示例
Sep 06 Javascript
js实现图片在未加载完成前显示加载中字样
Sep 03 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
基于JavaScript实现屏幕滚动效果
Jan 18 Javascript
详解vue2 $watch要注意的问题
Sep 08 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
Jun 28 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
May 26 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
Dec 16 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
《APMServ 5.1.2》使用图解
2006/10/23 PHP
PHP flock 文件锁详细介绍
2012/12/29 PHP
php生成RSS订阅的方法
2015/02/13 PHP
PHP Trait代码复用类与多继承实现方法详解
2019/06/17 PHP
jQuery 表单验证插件formValidation实现个性化错误提示
2009/06/23 Javascript
js网页侧边随页面滚动广告效果实现
2011/04/14 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
2012/02/02 Javascript
jquery实现背景墙聚光灯效果示例分享
2014/03/02 Javascript
JavaScript实现的使用键盘控制人物走动实例
2014/08/27 Javascript
原生JavaScript生成GUID的实现示例
2014/09/05 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
2014/11/04 Javascript
JQuery自动触发事件的方法
2015/06/13 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
2016/05/20 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
2016/12/08 Javascript
nodejs中全局变量的实例解析
2017/03/07 NodeJs
Node.js 实现简单的接口服务器的实例代码
2017/05/23 Javascript
详解jQuery中关于Ajax的几个常用的函数
2017/07/17 jQuery
Vue 中批量下载文件并打包的示例代码
2017/11/20 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
2019/01/18 Javascript
生产制造追溯系统之再说条码打印
2019/06/03 Javascript
在Python中使用HTMLParser解析HTML的教程
2015/04/29 Python
Pycharm学习教程(4) Python解释器的相关配置
2017/05/03 Python
python实现用户管理系统
2018/01/10 Python
python中如何使用insert函数
2020/01/09 Python
tensorflow常用函数API介绍
2020/04/19 Python
Python闭包与装饰器原理及实例解析
2020/04/30 Python
Python map及filter函数使用方法解析
2020/08/06 Python
pycharm中leetcode插件使用图文详解
2020/12/07 Python
css3实现信纸/同学录效果的示例代码
2018/12/11 HTML / CSS
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
澳大利亚在线家具、灯饰和家居装饰店:LivingStyles
2018/11/20 全球购物
Java基础面试题
2012/11/02 面试题
编辑找工作求职信范文
2013/12/16 职场文书
党组织公开承诺书
2014/03/29 职场文书
党员群众路线教育实践活动剖析材料
2014/10/10 职场文书
2015年团支部工作总结
2015/04/03 职场文书