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 相关文章推荐
分享2个jQuery插件--jquery.fileupload与artdialog
Dec 26 Javascript
jQuery超酷平面式时钟效果代码分享
Mar 30 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
Aug 26 Javascript
详解JavaScript中return的用法
May 08 Javascript
bootstrap栅格系统示例代码分享
May 22 Javascript
一个简易的js图片轮播效果
Jul 22 Javascript
JS判断数组那点事
Oct 10 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
值得收藏的八个常用的js正则表达式
Oct 19 Javascript
JS实现简单的表格增删
Jan 16 Javascript
js实现类选择器和name属性选择器的示例步骤
Feb 07 Javascript
JS实现百度搜索框
Feb 25 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
mysql From_unixtime及UNIX_TIMESTAMP及DATE_FORMAT日期函数
2010/03/21 PHP
php统计文件大小,以GB、MB、KB、B输出
2011/05/29 PHP
PHP+jQuery 注册模块的改进(三):更新到Smarty3.1
2014/10/14 PHP
php中JSON的使用与转换
2015/01/14 PHP
PHP编译安装时常见错误解决办法
2015/05/28 PHP
PHP基于文件存储实现缓存的方法
2015/07/20 PHP
PHP加密解密实例分析
2015/12/25 PHP
用php和jQuery来实现“顶”和“踩”的投票功能
2016/10/13 PHP
Laravel利用gulp如何构建前端资源详解
2018/06/03 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
javascript中利用数组实现的循环队列代码
2010/01/24 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
2010/11/19 Javascript
25个好玩的JavaScript小游戏分享
2011/04/22 Javascript
Extjs表单常见验证小结
2014/03/07 Javascript
JS下载文件|无刷新下载文件示例代码
2014/04/17 Javascript
JavaScript实现拖拽网页内元素的方法
2015/04/15 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
2015/06/18 Javascript
JavaScript学习笔记之数组去重
2016/03/23 Javascript
Jquery实现的简单轮播效果【附实例】
2016/04/19 Javascript
jQuery下拉框的简单应用
2016/06/24 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
2017/02/20 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
2017/05/07 Javascript
详谈DOM简介及节点、属性、查找节点的方法
2017/11/16 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
2019/09/01 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
2019/11/01 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
2020/07/17 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
2020/10/24 Javascript
在Python中使用元类的教程
2015/04/28 Python
DjangoWeb使用Datatable进行后端分页的实现
2020/05/18 Python
canvas学习笔记之绘制简单路径
2019/01/28 HTML / CSS
机械化及自动化毕业生的自我评价分享
2013/11/06 职场文书
农村产权制度改革实施方案
2014/03/21 职场文书
优秀纪检干部材料
2014/08/27 职场文书
法律专业大学生职业生涯规划书:向目标一步步迈进
2014/09/22 职场文书
企业宣传语大全
2015/07/13 职场文书
Pytorch 实现变量类型转换
2021/05/17 Python