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 load Page,load css,load js实现代码
Mar 31 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
Dec 20 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
Feb 17 Javascript
仿iframe效果Aajx文件上传实例
Nov 18 Javascript
常用的javascript设计模式
Jan 11 Javascript
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
vue组件中使用iframe元素的示例代码
Dec 13 Javascript
Vue 拦截器对token过期处理方法
Jan 23 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
Nov 21 Javascript
微信小程序HTTP接口请求封装的实现
Feb 21 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
Aug 20 Javascript
elementUI同一页面展示多个Dialog的实现
Nov 19 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类的使用 实例代码讲解
2009/12/28 PHP
PHP实现单例模式最安全的做法
2014/06/13 PHP
CodeIgniter框架数据库事务处理的设计缺陷和解决方案
2014/07/25 PHP
PHP列出MySQL中所有数据库的方法
2015/03/12 PHP
php自定义函数实现JS的escape的方法示例
2016/07/07 PHP
jQuery绑定事件不执行但alert后可以正常执行
2014/06/03 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
2014/12/18 Javascript
JQuery自适应窗口大小导航菜单附源码下载
2015/09/01 Javascript
jquery自适应布局的简单实例
2016/05/28 Javascript
JS全局变量和局部变量最新解析
2016/06/24 Javascript
JavaScript实现form表单的多文件上传
2020/03/27 Javascript
微信小程序滚动Tab实现左右可滑动切换
2017/08/17 Javascript
详解Immutable及 React 中实践
2018/03/01 Javascript
PM2自动部署代码步骤流程总结
2018/12/10 Javascript
TypeScript高级用法的知识点汇总
2019/12/17 Javascript
Node.js实现批量下载图片简单操作示例
2020/01/18 Javascript
原生JS实现相邻月份日历
2020/10/13 Javascript
[01:04:01]2014 DOTA2华西杯精英邀请赛5 24 DK VS VG
2014/05/25 DOTA
python利用matplotlib库绘制饼图的方法示例
2016/12/18 Python
Python爬虫包 BeautifulSoup  递归抓取实例详解
2017/01/28 Python
python定向爬取淘宝商品价格
2018/02/27 Python
pycharm 实现显示project 选项卡的方法
2019/01/17 Python
python制作抖音代码舞
2019/04/07 Python
python 实现二维列表转置
2019/12/02 Python
pytorch中的上采样以及各种反操作,求逆操作详解
2020/01/03 Python
2021年值得向Python开发者推荐的VS Code扩展插件
2021/01/25 Python
发现两个有趣的CSS3动画效果
2013/08/14 HTML / CSS
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
css3 transform及原生js实现鼠标拖动3D立方体旋转
2016/06/20 HTML / CSS
金融专业个人的自我评价
2013/10/18 职场文书
大学生军训广播稿
2014/01/24 职场文书
学校安全责任书
2014/04/14 职场文书
新闻报道稿范文
2015/07/23 职场文书
2016年大学光棍节活动总结
2016/04/05 职场文书
Nginx的反向代理实例详解
2021/03/31 Servers
撤回我也能看到!教你用Python制作微信防撤回脚本
2021/06/11 Python