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 面向对象编程 聊聊对象的事
Sep 17 Javascript
Jquery阻止事件冒泡 event.stopPropagation
Dec 11 Javascript
jQuery中ajax和post处理json的不同示例对比
Nov 02 Javascript
jquery插件corner实现圆角边框的方法
Mar 09 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
Aug 25 Javascript
javaScript实现可缩放的显示区效果代码
Oct 26 Javascript
详解Vue内部怎样处理props选项的多种写法
Nov 06 Javascript
vue-router的使用方法及含参数的配置方法
Nov 13 Javascript
JavaScript数据结构之栈实例用法
Jan 18 Javascript
ES6基础之展开语法(Spread syntax)
Feb 21 Javascript
怎么使用javascript深度拷贝一个数组
Jun 06 Javascript
layer.open回调获取弹出层参数的实现方法
Sep 10 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程序中的常见漏洞进行攻击(上)
2006/10/09 PHP
采集邮箱的php代码(抓取网页中的邮箱地址)
2012/07/17 PHP
Firefox中beforeunload事件的实现缺陷浅析
2012/05/03 Javascript
用nodejs写的一个简单项目打包工具
2013/05/11 NodeJs
jquery固定底网站底部菜单效果
2013/08/13 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
2013/12/16 Javascript
JS脚本defer的作用示例介绍
2014/01/02 Javascript
如何动态的导入js文件具体该怎么实现
2014/01/14 Javascript
jquery自动填充勾选框即把勾选框打上true
2014/03/24 Javascript
js实现鼠标经过时图片滚动停止的方法
2015/02/16 Javascript
谈谈jQuery Ajax用法详解
2015/11/27 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
使用原生js写ajax实例(推荐)
2017/05/31 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
2018/10/19 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
2018/12/13 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
2018/12/20 Javascript
Vue 实现登录界面验证码功能
2020/01/03 Javascript
[58:54]EG vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python脚本文件打包成可执行文件的方法
2015/06/02 Python
Python性能提升之延迟初始化
2016/12/04 Python
Python3 queue队列模块详细介绍
2018/01/05 Python
python编写暴力破解zip文档程序的实例讲解
2018/04/24 Python
python实现在函数图像上添加文字和标注的方法
2019/07/08 Python
pycharm新建一个python工程步骤
2019/07/16 Python
django使用django-apscheduler 实现定时任务的例子
2019/07/20 Python
使用Python开发个京东上抢口罩的小实例(仅作技术研究学习使用)
2020/03/10 Python
Keras实现DenseNet结构操作
2020/07/06 Python
万户网络JAVA程序员岗位招聘笔试试卷
2013/01/08 面试题
毕业生自我推荐
2013/11/04 职场文书
大学生作弊检讨书
2014/02/19 职场文书
高等教育学专业自荐书
2014/06/17 职场文书
电子专业求职信
2014/06/19 职场文书
四查四看自我剖析材料
2014/09/19 职场文书
保管员岗位职责
2015/02/14 职场文书
企业愿景口号
2015/12/25 职场文书
2019年年中工作总结讲话稿模板
2019/03/25 职场文书