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 相关文章推荐
不错的asp中显示新闻的功能
Oct 13 Javascript
JavaScript 创建对象
Jul 17 Javascript
JQuery 网站换肤功能实现代码
Nov 02 Javascript
Javascript面向对象设计一 工厂模式
Dec 20 Javascript
Javascript 赋值机制详解
Nov 23 Javascript
Jquery实现图片预加载与延时加载的方法
Dec 22 Javascript
jQuery获得子元素个数的方法
Apr 14 Javascript
Angular.JS学习之依赖注入$injector详析
Oct 20 Javascript
JavaScript对象_动力节点Java学院整理
Jun 23 Javascript
BootStrap 标题设置跨行无效的解决方法
Oct 25 Javascript
JS实现HTML页面中动态显示当前时间完整示例
Jul 30 Javascript
为什么要使用Vuex的介绍
Jan 19 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 INI配置文件的解析实现分析
2011/01/04 PHP
Yii遍历行下每列数据的方法
2016/10/17 PHP
PHP查询大量数据内存耗尽问题的解决方法
2016/10/28 PHP
laravel框架数据库配置及操作数据库示例
2019/10/10 PHP
基于JQuery的密码强度验证代码
2010/03/01 Javascript
Javascript开发之三数组对象实例介绍
2012/11/12 Javascript
详解使用PM2管理nodejs进程
2017/10/24 NodeJs
JavaScript多线程运行库Nexus.js详解
2017/12/22 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
2018/04/23 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
2018/08/10 Javascript
react native 获取地理位置的方法示例
2018/08/28 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
2019/09/11 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
2019/10/30 Javascript
vue实现商城秒杀倒计时功能
2019/12/12 Javascript
Jquery+javascript实现支付网页数字键盘
2020/12/21 jQuery
[17:36]VG战队纪录片
2014/08/21 DOTA
[03:17]2016完美“圣”典风云人物:冷冷专访
2016/12/08 DOTA
Python找出list中最常出现元素的方法
2016/06/14 Python
Python3爬楼梯算法示例
2019/03/04 Python
Python实现使用dir获取类的方法列表
2019/12/24 Python
解决python cv2.imread 读取中文路径的图片返回为None的问题
2020/06/02 Python
Python urllib2运行过程原理解析
2020/06/04 Python
使用sklearn对多分类的每个类别进行指标评价操作
2020/06/11 Python
Python 使用xlwt模块将多行多列数据循环写入excel文档的操作
2020/11/10 Python
办公室文员工作自我评价
2013/12/01 职场文书
大学毕业生个人自荐信范文
2014/01/08 职场文书
给老婆大人的检讨书
2014/02/24 职场文书
学前班评语大全
2014/05/04 职场文书
医学生求职信
2014/07/01 职场文书
大学生万能检讨书范例
2014/10/04 职场文书
公司表扬信格式
2015/05/04 职场文书
2015年财务经理工作总结
2015/05/13 职场文书
民间借贷借条范本
2015/05/25 职场文书
转学证明范本
2015/06/19 职场文书
《自然之道》读后感3篇
2019/12/17 职场文书
JavaWeb Servlet开发注册页面实例
2022/04/11 Java/Android