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 相关文章推荐
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
Oct 24 Javascript
JQuery 自定义CircleAnimation,Animate方法学习笔记
Jul 10 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
Mar 17 Javascript
node.js开机自启动脚本文件
Dec 24 Javascript
jQuery中next()方法用法实例
Jan 07 Javascript
浅析Javascript中bind()方法的使用与实现
Apr 29 Javascript
JavaScript基础教程——入门必看篇
May 20 Javascript
集合Bootstrap自定义confirm提示效果
Sep 19 Javascript
详解Angular操作cookies方法
Jun 01 Javascript
详解如何用VUE写一个多用模态框组件模版
Sep 27 Javascript
值得收藏的八个常用的js正则表达式
Oct 19 Javascript
ES6新增的数组知识实例小结
May 23 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 数组二分法查找函数代码
2010/02/16 PHP
php实现简单洗牌算法
2013/06/18 PHP
PHP错误提示的关闭方法详解
2013/06/23 PHP
ThinkPHP3.1之D方法实例详解
2014/06/20 PHP
详解PHP的Yii框架中组件行为的属性注入和方法注入
2016/03/18 PHP
HTTP状态代码以及定义(解释)
2007/02/02 Javascript
jQuery LigerUI 使用教程入门篇
2012/01/18 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
2012/12/12 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
2013/10/10 Javascript
将input file的选择的文件清空的两种解决方案
2013/10/21 Javascript
教你如何使用PHP输出中文JSON字符串
2014/05/22 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
2015/05/28 Javascript
JQuery+CSS实现图片上放置按钮的方法
2015/05/29 Javascript
node.js调用C++开发的模块实例
2015/07/03 Javascript
获取阴历(农历)和当前日期的js代码
2016/02/15 Javascript
基于jquery实现图片放大功能
2016/05/07 Javascript
详解vee-validate的使用个人小结
2017/06/07 Javascript
微信小程序滚动Tab实现左右可滑动切换
2017/08/17 Javascript
jquery一键控制checkbox全选、反选或全不选
2017/10/16 jQuery
JS Array.from()将伪数组转换成数组的方法示例
2020/03/23 Javascript
Python 使用requests模块发送GET和POST请求的实现代码
2016/09/21 Python
Python时间戳使用和相互转换详解
2017/12/11 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
Python 实现将数组/矩阵转换成Image类
2020/01/09 Python
深深扎根运动世界的生活品牌:Tillys
2017/10/30 全球购物
澳大利亚家具和家居用品在线商店:Interiors Online
2018/03/05 全球购物
Huda Beauty官方商店:化妆和美容产品
2020/09/05 全球购物
C语言面试题
2015/10/30 面试题
留学生如何写好自荐信
2013/12/27 职场文书
高三体育教学反思
2014/01/29 职场文书
2014年党员公开承诺践诺书
2014/03/25 职场文书
财务会计大学生自我评价
2014/04/09 职场文书
感恩教育活动总结
2014/05/05 职场文书
2016年圣诞节寄语(一句话)
2015/12/07 职场文书
Python虚拟环境virtualenv是如何使用的
2021/06/20 Python
详解Python中*args和**kwargs的使用
2022/04/07 Python