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 相关文章推荐
Jquery操作Select 简单方便 一个js插件搞定
Nov 12 Javascript
一些有用的JavaScript和jQuery的片段分享
Aug 23 Javascript
解决checkbox的attr(checked)一直为undefined问题
Jun 16 Javascript
jQuery判断数组是否包含了指定的元素
Mar 10 Javascript
跟我学习javascript的基本类型和引用类型
Nov 16 Javascript
浅析JavaScript中浏览器的兼容问题
Apr 19 Javascript
深入理解(function(){... })();
Aug 16 Javascript
jquery easyUI中ajax异步校验用户名
Aug 19 Javascript
javascript replace()第二个参数为函数时的参数用法
Dec 26 Javascript
Angular使用cli生成自定义文件、组件的方法
Sep 04 Javascript
基于JS实现一个随机生成验证码功能
May 29 Javascript
5种方法告诉你如何使JavaScript 代码库更干净
Sep 15 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中转义mysql语句的实现代码
2011/06/24 PHP
php 备份数据库代码(生成word,excel,json,xml,sql)
2013/06/23 PHP
PHP中常用的字符串格式化函数总结
2014/11/19 PHP
PHP实现加强版加密解密类实例
2015/07/29 PHP
Yii2框架RESTful API 格式化响应,授权认证和速率限制三部分详解
2016/11/10 PHP
PHP编程实现的TCP服务端和客户端功能示例
2018/04/13 PHP
Nigma vs AM BO3 第二场2.13
2021/03/10 DOTA
jQuery实现类似滑动门切换效果的层切换
2013/09/23 Javascript
Node.js实现Excel转JSON
2015/04/24 Javascript
jquery实现页面常用的返回顶部效果
2016/03/04 Javascript
JS函数定义方式的区别介绍
2016/03/22 Javascript
Vue.extend构造器的详解
2017/07/17 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
2017/07/24 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
2019/02/20 Javascript
node微信开发之获取access_token+自定义菜单
2019/03/17 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
2020/01/04 Javascript
js中延迟加载和预加载的具体使用
2021/01/14 Javascript
[01:01:36]Optic vs paiN 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python获取linux主机ip的简单实现方法
2016/04/18 Python
python如何查看系统网络流量的信息
2016/09/12 Python
python sys,os,time模块的使用(包括时间格式的各种转换)
2018/04/27 Python
如何优雅地改进Django中的模板碎片缓存详解
2018/07/04 Python
Python中查看变量的类型内存地址所占字节的大小
2019/06/26 Python
Django实现跨域请求过程详解
2019/07/25 Python
keras导入weights方式
2020/06/12 Python
Python 数据的累加与统计的示例代码
2020/08/03 Python
Python自动化之UnitTest框架实战记录
2020/09/08 Python
2分钟教你实现环形/扇形菜单(基础版)
2020/01/15 HTML / CSS
护士个人简历自荐信
2013/10/18 职场文书
正规的求职信范文分享
2013/12/11 职场文书
聊城大学毕业生自荐书
2014/02/01 职场文书
金融事务专业求职信
2014/04/25 职场文书
同意迁入证明模板
2014/10/26 职场文书
2014年除四害工作总结
2014/12/06 职场文书
送给自己的励志语句:要安静的优秀,悄无声息的坚强
2019/11/26 职场文书
MySQL外键约束(Foreign Key)案例详解
2022/06/28 MySQL