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 相关文章推荐
jQuery prev ~ siblings选择器使用介绍
Aug 09 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
May 03 Javascript
早该知道的7个JavaScript技巧
Jun 21 Javascript
jQuery实现遮罩层登录对话框
Dec 29 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
Jan 10 Javascript
ES6 Promise对象概念与用法分析
Apr 01 Javascript
Easyui在treegrid添加控件的实现方法
Jun 23 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
在react-router4中进行代码拆分的方法(基于webpack)
Mar 08 Javascript
vue基于viewer实现的图片查看器功能
Apr 12 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
Aug 08 Javascript
解决element-ui的下拉框有值却无法选中的情况
Nov 07 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
在Windows系统上安装PHP运行环境文字教程
2010/07/19 PHP
PHP学习散记_编码(json_encode 中文不显示)
2011/11/10 PHP
浅谈COOKIE和SESSION区别
2015/07/19 PHP
360搜索引擎自动收录php改写方案
2018/04/28 PHP
JavaScript获取GridView选择的行内容
2009/04/14 Javascript
javascript 页面划词搜索JS
2009/09/28 Javascript
基于jQuery实现模拟页面加载进度条
2013/04/01 Javascript
高效率JavaScript编写技巧整理
2013/08/23 Javascript
javascript事件委托的用法及其好处简析
2016/04/04 Javascript
JavaScript希尔排序、快速排序、归并排序算法
2016/05/08 Javascript
基于jQuery实现文字打印动态效果
2017/04/21 jQuery
基于JavaScript表单脚本(详解)
2017/10/18 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
2018/10/09 Javascript
VUE : vue-cli中去掉路由中的井号#操作
2020/09/04 Javascript
python dict remove数组删除(del,pop)
2013/03/24 Python
python实现的正则表达式功能入门教程【经典】
2017/06/05 Python
Python subprocess模块详细解读
2018/01/29 Python
python爬取m3u8连接的视频
2018/02/28 Python
将pandas.dataframe的数据写入到文件中的方法
2018/12/07 Python
Django中在xadmin中集成DjangoUeditor过程详解
2019/07/24 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
使用Python爬取弹出窗口信息的实例
2020/03/14 Python
Python无头爬虫下载文件的实现
2020/04/02 Python
python 从list中随机取值的方法
2020/11/16 Python
HTML5中Localstorage的使用教程
2015/07/09 HTML / CSS
3D空间设计学生找工作的自我评价
2013/10/28 职场文书
财务方面个人工作的自我评价
2013/12/28 职场文书
群众路线教师自我剖析材料
2014/09/29 职场文书
车队安全员岗位职责
2015/02/15 职场文书
元旦晚会主持词开场白
2015/05/28 职场文书
处罚决定书范文
2015/06/24 职场文书
2015年支教教师工作总结
2015/07/22 职场文书
2015年乡镇组织委员工作总结
2015/10/23 职场文书
MySQL数据库必备之条件查询语句
2021/10/15 MySQL
MySQL之select、distinct、limit的使用
2021/11/11 MySQL
tp5使用layui实现多个图片上传(带附件选择)的方法实例
2021/11/17 PHP