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 autocomplate 自扩展插件、自动完成示例代码
Mar 28 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
Sep 14 Javascript
JS+CSS实现仿新浪微博搜索框的方法
Feb 24 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
Aug 26 Javascript
jquery实现二级导航下拉菜单效果
Dec 18 Javascript
BootStrap下jQuery自动完成的样式调整
May 30 Javascript
怎样判断jQuery当前元素是隐藏还是显示
Nov 23 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
Dec 03 Javascript
EasyUI为Numberbox添加blur事件的方法
Mar 05 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
Mar 21 Javascript
详解JavaScript添加给定的标签选项
Sep 17 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
Sep 24 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
人族 Terran 魔法与科技
2020/03/14 星际争霸
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
Django 标签筛选的实现代码(一对多、多对多)
2018/09/05 PHP
php实现简单的守护进程创建、开启与关闭操作
2019/08/13 PHP
使用PHP开发留言板功能
2019/11/19 PHP
解决FireFox下[使用event很麻烦]的问题
2006/11/26 Javascript
jquery 设置元素相对于另一个元素的top值(实例代码)
2013/11/06 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
2015/03/02 Javascript
JS实现文字掉落效果的方法
2015/05/06 Javascript
jQuery添加和删除指定标签的方法
2015/12/16 Javascript
Window.Open打开窗体和if嵌套代码
2016/04/15 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
2016/05/18 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
2017/02/10 Javascript
基于ES6作用域和解构赋值详解
2017/11/03 Javascript
layer弹出层全屏及关闭方法
2018/08/17 Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
2019/07/20 Javascript
jquery将json转为数据字典的实例代码
2019/10/11 jQuery
js实现点击上传图片并设为模糊背景
2020/08/02 Javascript
[01:38]DOTA2 2015国际邀请赛中国区预选赛 Showopen
2015/06/01 DOTA
Python复制目录结构脚本代码分享
2015/03/06 Python
Python3删除排序数组中重复项的方法分析
2019/01/31 Python
python实现简单日期工具类
2019/04/24 Python
Python 数据可视化pyecharts的使用详解
2019/06/26 Python
Python SELENIUM上传文件或图片实现过程
2019/10/28 Python
提升python处理速度原理及方法实例
2019/12/25 Python
python GUI库图形界面开发之PyQt5信号与槽事件处理机制详细介绍与实例解析
2020/03/08 Python
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
对CSS3选择器的研究(详解)
2016/09/16 HTML / CSS
浅析css3中matrix函数的使用
2016/06/06 HTML / CSS
施华洛世奇德国官网:SWAROVSKI德国
2017/02/01 全球购物
Jeep牧马人、切诺基和自由人零配件:4 Wheel Drive Hardware
2017/07/02 全球购物
什么是组件架构
2016/05/15 面试题
竞选大队长演讲稿
2014/04/29 职场文书
环保公益策划方案
2014/08/15 职场文书
2014年青年教师工作总结
2014/12/17 职场文书
2016年社区文体活动总结
2016/04/06 职场文书