vue router下的html5 history在iis服务器上的设置方法


Posted in Javascript onOctober 18, 2017

首先先照搬下官网的介绍

当你使用 history 模式时,URL 就像正常的 url,例如 http://yoursite.com/user/id,也好看!

不过这种模式要玩好,还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,这就不好看了。

所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个index.html 页面,这个页面就是你 app 依赖的页面。

但是官网上仅给了Apache服务器和Nginx服务器的配置,so。。。。。

那么下面我们开始介绍如何配置iis服务器。(我的iis为iis7.5)

1.安装url重写模块,找到管理下的web平台安装程序,搜索url,选择url重写工具2.0,选择安装。

vue router下的html5 history在iis服务器上的设置方法

vue router下的html5 history在iis服务器上的设置方法

2.添加规则。点击url重写,选择添加规则,空白规则,输入名称,按照下图进行配置。

vue router下的html5 history在iis服务器上的设置方法

vue router下的html5 history在iis服务器上的设置方法

vue router下的html5 history在iis服务器上的设置方法

3.vue程序中添加两条路由。

vue router下的html5 history在iis服务器上的设置方法

下面总结下:

url重写设置中,将配置url选择为与模式匹配,模式中填入*,使用选项选择通配符;即表示所有的网站都通过此模式进行检查匹配。匹配的条件是下面的条件选项,我们选择的是不是文件,逻辑分组为全部匹配。

操作为重写到我们的index.html(根据情况,设置为自己的单页面应用首页)。以上操作是设置我们的页面请求为先检查有没有此文件,没有此文件全部重写到我们的首页中,从而能够是的我们的自定义路由起作用。

然后我们在vue程序中设置/index.html路径为我们的起始页面,并且定义404页面。至此完成设置。

参考阅读:

总结

以上所述是小编给大家介绍的vue router下的html5 history在iis服务器上的设置方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
Nov 14 Javascript
jquery中获取元素里某一特定子元素的代码
Dec 02 Javascript
jquery通过ajax加载一段文本内容的方法
Jan 15 Javascript
Javascript实现多彩雪花从天降散落效果的方法
Feb 02 Javascript
JavaScript模块规范之AMD规范和CMD规范
Oct 27 Javascript
javascript原生ajax写法分享
Apr 10 Javascript
JavaScript的String字符串对象常用操作总结
May 26 Javascript
AngularJS实现动态添加Option的方法
May 17 Javascript
详解Vue中localstorage和sessionstorage的使用
Dec 22 Javascript
详解layui中的树形关于取值传值问题
Jan 16 Javascript
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
WebRTC记录音视频流(web技术分享)
Feb 24 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
Oct 18 #Javascript
VUE长按事件需求详解
Oct 18 #Javascript
vue router仿天猫底部导航栏功能
Oct 18 #Javascript
Node做中转服务器转发接口
Oct 18 #Javascript
Vue组件之Tooltip的示例代码
Oct 18 #Javascript
JS正则表达式完美实现身份证校验功能
Oct 18 #Javascript
详解vue项目首页加载速度优化
Oct 18 #Javascript
You might like
php Sql Server连接失败问题及解决办法
2009/08/07 PHP
PHP下通过QRCode类库创建中间带网站LOGO的二维码
2014/07/12 PHP
[原创]php简单防盗链验证实现方法
2016/07/09 PHP
php基于PDO连接MSSQL示例DEMO
2016/07/13 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
超级强大的表单验证
2006/06/26 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
2010/03/24 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
2014/07/18 Javascript
javascript实现类似百度分享功能的方法
2015/07/27 Javascript
easyui导出excel无法弹出下载框的快速解决方法
2016/11/10 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
JS常用正则表达式总结【经典】
2017/05/12 Javascript
JavaScript简介_动力节点Java学院整理
2017/06/26 Javascript
js input输入百分号保存数据库失败的解决方法
2018/05/26 Javascript
JavaScript对象拷贝与赋值操作实例分析
2018/12/10 Javascript
ant design的table组件实现全选功能以及自定义分页
2020/11/17 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
2020/12/29 Javascript
[01:11:46]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第一场 2月23日
2021/03/11 DOTA
python命令 -u参数用法解析
2019/10/24 Python
python re模块匹配贪婪和非贪婪模式详解
2020/02/11 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
浅析Django 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求
2020/03/09 Python
python中有函数重载吗
2020/05/28 Python
利用python+ffmpeg合并B站视频及格式转换的实例代码
2020/11/24 Python
python程序实现BTC(比特币)挖矿的完整代码
2021/01/20 Python
体育比赛口号
2014/06/09 职场文书
水利水电建筑施工应届生求职信
2014/07/04 职场文书
2014大学生中国梦主题教育学习思想汇报
2014/09/10 职场文书
董事长年会致辞
2015/07/29 职场文书
素质教育学习心得体会
2016/01/19 职场文书
2019单位介绍信怎么写
2019/06/24 职场文书
MySQL的join buffer原理
2021/04/29 MySQL
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL
html5调用摄像头实例代码
2021/06/28 HTML / CSS
分享五个Node.js开发的优秀实践 
2022/04/07 NodeJs
vue项目如何打包之项目打包优化(让打包的js文件变小)
2022/04/30 Vue.js