vue 项目地址去掉 #的方法


Posted in Javascript onOctober 20, 2018

vue-router 设置 history 模式

vue 项目往往会搭配 vue-router 官方路由管理器,它和 vue.js 的核心深度集成,让构建单页面应用变得易如反掌。vue-router 默认为 hash 模式,使用 URL 的 hash 来模拟一个完整的 URL,所以当 URL 改变时,页面不会重新加载,只是根据 hash 来更换显示对应的组件,这就是所谓的单页面应用。

但是使用默认的 hash 模式时,浏览器 URL 地址中会有一个 # ,这跟以往的网站地址不太一样,可能也会让大部分人不习惯,甚至觉得它很丑。

想要去掉地址中的 # 也不难,只要更换 vue-router 的另一个模式 history 模式即可做到。

vue 项目地址去掉 #的方法

history 模式

当你使用 history 模式时,URL 就变回正常又好看的地址了,和大部分网站地址一样,例如: http://zhengchang.com/name/id

不过,这种模式有个坑,不仅需要前端开发人员将模式改为 history 模式,还需要后端进行相应的配置。如果后端没有正确的配置好,当你访问你的项目地址时,就会出现 404 ,这样可就更不好看了。

官方给出了几种常用的后端配置例子:

Apache

vue 项目地址去掉 #的方法 

nginx

vue 项目地址去掉 #的方法 

原生 Node.js

vue 项目地址去掉 #的方法

Internet Information Services (IIS)

vue 项目地址去掉 #的方法

因为我的项目后端服务是 IIS ,所以就着重分享一下 IIS 的相关配置 。

vue 项目地址去掉 #的方法

IIS 后端配置

首先,前端将 vue-router 模式修改为 history 模式,开发完成并打包后,将文件部署到站点。站点的根目录会有一些相关配置文件,这些后端人员会很清楚,前端开发只需要告诉后端人员如何写去掉 # 的配置文件。

在站点的根目录创建一个 web.config 文件,内容如上图所示。起到关键作用的是 rewrite 标签中的代码:

  • rule 标签:代表定义的一条规则。
  • match 标签:你的规则是什么要求,url 属性内容就是要求(正则表达式)。
  • action 标签:type 属性为 Rewrite(重写),url 属性为目标。意思是:如果满足 match 标签中 url 属性的正则,就执行此配置(将符合match标签url要求的地址,重写为action标签中url属性的地址)。

这个配置就和重定向一样,将符合你要求的地址,重定向为你想要的地址。下面是我的项目中 IIS 的配置:

我的要求是,除了 "api" 或者 "token" 开头的地址,全部重定向为 " / " ,因为我的接口地址是 api 和 token 开头的,所以接口地址不能变。

vue 项目地址去掉 #的方法

api 接口

vue 项目地址去掉 #的方法

token 接口

然后服务端设置的是默认显示目录下的 index.html ,而这个 index.html 文件就是前端打包后生成的 html 文件。网站打开了 html 文件,执行对应脚本,就会按照你的路由设置显示对应的组件内容,浏览器地址中的 # 也被替换掉了。

还有一个 rule 标签是配置我的图片路径的。

图片在开发环境中,都按照对应的组件,分类放到不同的文件夹中,例如:home 组件中的 banner 图,路径是 “ assets/home/banner.png ”。

我的项目打包后,生成了 index.html 和 static 文件夹,js、css、img等文件夹都在 static 中。所有的图片全都放在“ /static/img/ ”下面,图片路径也会自动更改为“ ./static/img/ ”。

我不希望图片路径重定向为“ / ”,所以规则就是:将符合“ ./static/img/name.png ”重定向为“ /static/img/name.png ”。

vue 项目地址去掉 #的方法

静态图片路径

配置里的最难的可能是那个正则表达式,根据不同的需求配置不同的正则表达式,搞定正则就大功告成了!

总结

以上所述是小编给大家介绍的vue 项目地址去掉 #的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
浅谈JS日期(Date)处理函数
Dec 07 Javascript
jQuery中[attribute!=value]选择器用法实例
Dec 31 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
Sep 10 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
Apr 05 Javascript
bootstrap modal弹出框的垂直居中
Dec 14 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
Jul 27 Javascript
vue复合组件实现注册表单功能
Nov 06 Javascript
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
JS限制输入框输入的实现代码
Jul 02 Javascript
微信小程序中使用wxss加载图片并实现动画效果
Aug 13 Javascript
深入理解javascript prototype的相关知识
Sep 19 Javascript
原生JavaScript实现留言板
Jan 10 Javascript
VUE-cli3使用 svg-sprite-loader
Oct 20 #Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
Oct 20 #Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
Oct 19 #Javascript
使用pkg打包Node.js应用的方法步骤
Oct 19 #Javascript
简化版的vue-router实现思路详解
Oct 19 #Javascript
vue中el-upload上传图片到七牛的示例代码
Oct 19 #Javascript
浅析vue-router原理
Oct 19 #Javascript
You might like
PHP 字符串加密函数(在指定时间内加密还原字符串,超时无法还原)
2010/04/28 PHP
PHP中使用GD库创建圆形饼图的例子
2014/11/19 PHP
JSON用法之将PHP数组转JS数组,JS如何接收PHP数组
2015/10/08 PHP
PHP加密3DES报错 Call to undefined function: mcrypt_module_open() 如何解决
2016/04/17 PHP
精通Javascript系列之Javascript基础篇
2011/06/07 Javascript
深入浅析javascript立即执行函数
2015/10/23 Javascript
jQuery实现点击查看大图并以弹框的形式居中
2016/08/08 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
2017/09/01 Javascript
微信小程序授权获取用户详细信息openid的实例详解
2017/09/20 Javascript
vue父组件向子组件动态传值的两种方法
2017/11/11 Javascript
详解weex默认webpack.config.js改造
2018/01/08 Javascript
Ubuntu 14.04+Django 1.7.1+Nginx+uwsgi部署教程
2014/11/18 Python
python使用calendar输出指定年份全年日历的方法
2015/04/04 Python
浅谈python实现Google翻译PDF,解决换行的问题
2018/11/28 Python
python对文件目录的操作方法实例总结
2019/06/24 Python
python实现截取屏幕保存文件,删除N天前截图的例子
2019/08/27 Python
Python爬取豆瓣视频信息代码实例
2019/11/16 Python
基于Python 中函数的 收集参数 机制
2019/12/21 Python
python Xpath语法的使用
2020/11/26 Python
用sleep间隔进行python反爬虫的实例讲解
2020/11/30 Python
详解CSS3中强大的filter(滤镜)属性
2017/06/29 HTML / CSS
美国时装品牌:Nautica(诺帝卡)
2016/08/28 全球购物
美国女性奢华品牌精品店:INTERMIX
2017/10/12 全球购物
Lou & Grey美国官网:主打舒适性面料服饰
2017/12/21 全球购物
精选鞋类、服装和配饰的全球领先目的地:Bodega
2021/02/27 全球购物
自荐信写法介绍
2014/01/25 职场文书
数学教研活动总结
2014/07/02 职场文书
年度安全生产目标责任书
2014/07/23 职场文书
先进员工获奖感言
2014/08/14 职场文书
超市开业庆典活动策划方案
2014/09/15 职场文书
2014副镇长民主生活会个人对照检查材料思想汇报
2014/09/30 职场文书
考研复习计划
2015/01/19 职场文书
2016年小学生寒假家长评语
2015/10/10 职场文书
使用Ajax实现进度条的绘制
2022/04/07 Javascript
Win10玩csgo闪退如何解决?Win10玩csgo闪退的解决方法
2022/07/23 数码科技
table不让td文字溢出操作方法
2022/12/24 HTML / CSS