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 相关文章推荐
JavaScript实现Sleep函数的代码
Mar 04 Javascript
js实现addClass,removeClass,hasClass的函数代码
Jul 13 Javascript
script标签属性type与language使用选择
Dec 02 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
Dec 12 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
Dec 17 Javascript
jQuery子属性过滤选择器用法分析
Feb 10 Javascript
整理JavaScript创建对象的八种方法
Nov 03 Javascript
AngularJS入门教程引导程序
Aug 18 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
Jan 22 Javascript
Angular4 ElementRef的应用
Feb 26 Javascript
layui按条件隐藏表格列的实例
Sep 19 Javascript
vuex存值与取值的实例
Nov 06 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积分兑换接口实例
2015/02/09 PHP
thinkphp实现分页显示功能
2016/12/03 PHP
JavaScript 的方法重载效果
2009/08/07 Javascript
Extjs 几个方法的讨论
2010/01/28 Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
2011/05/24 Javascript
js判断undefined变量类型使用typeof
2013/06/03 Javascript
JS获取地址栏参数的小例子
2013/08/23 Javascript
js实现编辑div节点名称的方法
2014/12/17 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
2015/05/11 Javascript
javascript实现继承的简单实例
2015/07/26 Javascript
谈一谈jQuery核心架构设计
2016/03/28 Javascript
JS递归遍历对象获得Value值方法技巧
2016/06/14 Javascript
Vue.js -- 过滤器使用总结
2017/02/18 Javascript
详解Vue2.0里过滤器容易踩到的坑
2017/06/01 Javascript
Node.js使用gm拼装sprite图片
2017/07/04 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
2018/08/28 jQuery
在element-ui的select下拉框加上滚动加载
2019/04/18 Javascript
Node.js API详解之 V8模块用法实例分析
2020/06/05 Javascript
JavaScript中如何调用Java方法
2020/09/16 Javascript
用实例分析Python中method的参数传递过程
2015/04/02 Python
python简单获取本机计算机名和IP地址的方法
2015/06/03 Python
Python决策树分类算法学习
2017/12/22 Python
python @property的用法及含义全面解析
2018/02/01 Python
python正则表达式匹配不包含某几个字符的字符串方法
2019/07/23 Python
python修改FTP服务器上的文件名
2019/09/11 Python
Python cookie的保存与读取、SSL讲解
2020/02/17 Python
Django框架models使用group by详解
2020/03/11 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
全面解析HTML5中的标准属性与自定义属性
2016/02/18 HTML / CSS
.NET里面什么时候需要调用垃圾回收
2015/06/01 面试题
计算机专业自荐信范文
2014/05/28 职场文书
介绍信范文大全
2015/05/07 职场文书
Python基础之hashlib模块详解
2021/05/06 Python
python 网络编程要点总结
2021/06/18 Python
python获取对象信息的实例详解
2021/07/07 Python
javascript之Object.assign()的痛点分析
2022/03/03 Javascript