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的跨域调用文件
Nov 19 Javascript
JS实现Fisheye效果动感放大菜单代码
Oct 21 Javascript
基于JavaScript代码实现随机漂浮图片广告
Jan 05 Javascript
jQuery Dialog对话框事件用法实例分析
May 10 Javascript
关于JavaScript限制字数的输入框的那些事
Aug 14 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
Nov 01 Javascript
JavaScript用构造函数如何获取变量的类型名
Dec 23 Javascript
JS按条件 serialize() 对应标签的使用方法
Jul 24 Javascript
实例教学如何写vue插件
Nov 30 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
Jun 15 Javascript
Echart折线图手柄触发事件示例详解
Dec 16 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
Jun 03 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&mysql(三)
2006/10/09 PHP
php输出金字塔的2种实现方法
2014/12/16 PHP
php数组函数array_key_exists()小结
2015/12/10 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
关于IFRAME 自适应高度的研究
2006/07/20 Javascript
JavaScript判断两种格式的输入日期的正确性的代码
2007/03/25 Javascript
js multiple全选与取消全选实现代码
2012/12/04 Javascript
JS限制上传图片大小不使用控件在本地实现
2012/12/19 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
2013/02/26 Javascript
JS中Iframe之间传值及子页面与父页面应用
2013/03/11 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
2013/04/02 Javascript
封装了一个支持匿名函数的Javascript事件监听器
2014/06/05 Javascript
Bootstrap与Angularjs的模态框实例代码
2017/08/03 Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
2017/08/16 Javascript
微信小程序中换行空格(多个空格)写法详解
2018/07/10 Javascript
微信小程序实现蒙版弹出窗功能
2019/09/17 Javascript
教你如何用Node实现API的转发(某音乐)
2019/09/20 Javascript
解决echarts数据二次渲染不成功的问题
2020/07/20 Javascript
修改Python的pyxmpp2中的主循环使其提高性能
2015/04/24 Python
Python编程之多态用法实例详解
2015/05/19 Python
使用python绘制常用的图表
2016/08/27 Python
PyCharm配置mongo插件的方法
2018/11/30 Python
Python 3.8新特征之asyncio REPL
2019/05/28 Python
如何用Anaconda搭建虚拟环境并创建Django项目
2020/08/02 Python
HTML5 Web Workers之网站也能多线程的实现
2013/04/24 HTML / CSS
瑞典时尚服装购物网站:Miinto.se
2017/10/30 全球购物
ZWILLING双立人法国网上商店:德国刀具锅具厨具品牌
2019/08/28 全球购物
编写类String 的构造函数、析构函数和赋值函数
2012/09/09 面试题
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
Java的类与C++的类有什么不同
2014/01/18 面试题
政府采购方案
2014/06/12 职场文书
党的群众路线教育实践活动教师自我剖析材料
2014/10/09 职场文书
离婚协议书样本
2015/01/26 职场文书
2015年入党决心书
2015/02/05 职场文书
分析并发编程之LongAdder原理
2021/06/29 Java/Android