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 相关文章推荐
javascript div 遮罩层封锁整个页面
Jul 10 Javascript
使用js操作cookie的一点小收获分享
Sep 03 Javascript
JQuery中serialize() 序列化
Mar 13 Javascript
JavaScript模块规范之AMD规范和CMD规范
Oct 27 Javascript
jQuery中的一些常见方法小结(推荐)
Jun 13 Javascript
Angularjs 实现分页功能及示例代码
Sep 14 Javascript
jQuery设计思想
Mar 07 Javascript
JS动态修改网页body的背景色实例代码
Oct 07 Javascript
JS闭包经典实例详解
Dec 20 Javascript
原生js实现Flappy Bird小游戏
Dec 24 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
Apr 04 Javascript
js笔试题-接收get请求参数
Jun 15 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
PHP4 与 MySQL 数据库操作函数详解
2006/10/09 PHP
深入file_get_contents与curl函数的详解
2013/06/25 PHP
centos下file_put_contents()无法写入文件的原因及解决方法
2017/04/01 PHP
详解Laravel5.6 Passport实现Api接口认证
2018/07/27 PHP
PJ Blog修改-禁止复制的代码和方法
2006/10/25 Javascript
文本框输入时 实现自动提示(像百度、google一样)
2012/04/05 Javascript
ajax异步刷新实现更新数据库
2012/12/03 Javascript
计算新浪Weibo消息长度(还可以输入119字)
2013/07/02 Javascript
wap图片滚动特效无css3元素纯js脚本编写
2014/08/22 Javascript
javascript实现汉字转拼音代码分享
2015/04/20 Javascript
jQuery满意度星级评价插件特效代码分享
2015/08/19 Javascript
Javascript简单实现面向对象编程继承实例代码
2015/11/27 Javascript
设置jQueryUI DatePicker默认语言为中文
2016/06/04 Javascript
RequireJS多页面应用实例分析
2016/06/29 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
2016/08/17 Javascript
javascript的函数劫持浅析
2016/09/26 Javascript
浅谈angularjs $http提交数据探索
2017/01/20 Javascript
原生JS实现图片网格式渐显、渐隐效果
2017/06/05 Javascript
ajax跨域访问遇到的问题及解决方案
2019/05/23 Javascript
基于Express框架使用POST传递Form数据
2019/08/10 Javascript
JS函数基本定义与用法示例
2020/01/15 Javascript
js实现踩五彩块游戏
2020/02/08 Javascript
Vue实现简单的拖拽效果
2020/08/25 Javascript
Python读取指定日期邮件的实例
2019/02/01 Python
python批量生成条形码的示例
2020/10/10 Python
HTML5 weui使用笔记
2019/11/21 HTML / CSS
如何用Python来进行查询和替换一个文本字符串
2014/01/02 面试题
生物化学研究助理员求职信
2013/10/09 职场文书
大学生职业生涯规划书前言
2014/01/09 职场文书
《灰椋鸟》教学反思
2014/04/27 职场文书
安全资料员岗位职责范本
2014/06/28 职场文书
小学教师师德整改措施
2014/09/29 职场文书
毕业纪念册寄语大全
2015/02/26 职场文书
python3.9之你应该知道的新特性详解
2021/04/29 Python
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis
mysql数据库入门第一步之创建表
2021/05/14 MySQL