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 相关文章推荐
this[] 指的是什么内容 讨论
Mar 24 Javascript
Extjs TriggerField在弹出窗口显示不出问题的解决方法
Jan 08 Javascript
基于mootools 1.3框架下的图片滑动效果代码
Apr 22 Javascript
js处理表格对table进行修饰
May 26 Javascript
分享一个自己动手写的jQuery分页插件
Aug 28 Javascript
Angular中的Promise对象($q介绍)
Mar 03 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
May 16 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
Jun 17 Javascript
JavaScript中Array的实用操作技巧分享
Sep 11 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
Mar 07 Javascript
小程序自定义模板实现吸顶功能
Jan 08 Javascript
CocosCreator入门教程之网络通信
Apr 16 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写入txt乱码的解决方法
2019/09/17 PHP
PHP如何防止用户重复提交表单
2020/12/09 PHP
Asp.Net之JS生成分页条的方法
2016/11/23 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
2016/12/05 Javascript
微信小程序 slider的简单实例
2017/04/19 Javascript
20行JS代码实现网页刮刮乐效果
2017/06/23 Javascript
JavaScript原生实现观察者模式的示例
2017/12/15 Javascript
Vue+webpack项目基础配置教程
2018/02/12 Javascript
jQuery创建及操作xml格式数据示例
2018/05/26 jQuery
vue如何根据网站路由判断页面主题色详解
2018/11/02 Javascript
vue-cli 目录结构详细讲解总结
2019/01/15 Javascript
详解vue挂载到dom上会发生什么
2019/01/20 Javascript
Vue自定义属性实例分析
2019/02/23 Javascript
JavaScript面试技巧之数组的一些不low操作
2019/03/22 Javascript
js实现简易计算器功能
2019/10/18 Javascript
vue改变循环遍历后的数据实例
2019/11/07 Javascript
Angular之jwt令牌身份验证的实现
2020/02/14 Javascript
原生js实现瀑布流效果
2020/03/09 Javascript
JavaScript实现多个物体同时运动
2020/03/12 Javascript
javascript实现文字跑马灯效果
2020/06/18 Javascript
Python类的多重继承问题深入分析
2014/11/09 Python
tensorflow训练中出现nan问题的解决
2018/02/10 Python
Python键盘输入转换为列表的实例
2018/06/23 Python
Pygame的程序开始示例代码
2020/05/07 Python
Python pymsql模块的使用
2020/09/07 Python
css3背景图片透明叠加属性cross-fade简介及用法实例
2013/01/08 HTML / CSS
New Balance美国官网:运动鞋和健身服装
2017/04/11 全球购物
全球酒店比价网:HotelsCombined
2017/06/20 全球购物
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
应届本科生推荐信范文
2013/12/25 职场文书
优秀老师事迹材料
2014/02/05 职场文书
保安队长职务说明书
2014/02/23 职场文书
小学德育工作经验交流材料
2014/05/22 职场文书
学校搬迁方案
2014/06/15 职场文书
MySql子查询IN的执行和优化的实现
2021/08/02 MySQL
windows安装 redis 6.2.6最新步骤详解
2022/04/26 Redis