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加密解密7种方法总结分析
Oct 07 Javascript
jQuery 性能优化指南(2)
May 21 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
Dec 08 Javascript
js为数字添加逗号并格式化数字的代码
Aug 23 Javascript
为指定的元素添加遮罩层的示例代码
Jan 15 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
Feb 05 Javascript
JavaScript数组常用方法
Mar 02 Javascript
JavaScript制作简易的微信打飞机
Mar 31 Javascript
javascript每日必学之多态
Feb 23 Javascript
js实现带农历和八字等信息的日历特效
May 16 Javascript
JavaScript实现的微信二维码图片生成器的示例
Oct 26 Javascript
js中数组常用方法总结(推荐)
Apr 09 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 allow_url_include的应用和解释
2010/04/22 PHP
一个基于phpQuery的php通用采集类分享
2014/04/09 PHP
Laravel使用memcached缓存对文章增删改查进行优化的方法
2016/10/08 PHP
fromCharCode和charCodeAt 方法
2006/12/27 Javascript
javascript 日历提醒系统( 兼容所有浏览器 )
2009/04/07 Javascript
Node.js开发指南中的简单实例(mysql版)
2013/09/17 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
js格式化时间小结
2014/11/03 Javascript
jQuery检查事件是否触发的方法
2015/06/26 Javascript
jQuery实现网站添加高亮突出显示效果的方法
2015/06/26 Javascript
javascript中for/in循环及使用技巧
2015/09/01 Javascript
分享Javascript实用方法二
2015/12/13 Javascript
jQuery隐藏和显示效果实现
2016/04/06 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
2016/09/21 Javascript
JS扩展类,克隆对象与混合类实例分析
2016/11/26 Javascript
Angular中点击li标签实现更改颜色的核心代码
2017/12/08 Javascript
JS实现去除数组中重复json的方法示例
2017/12/21 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
2018/06/19 Javascript
详解vue中axios的封装
2018/07/18 Javascript
vue中使用vee-validator完成表单校验方案
2019/11/01 Javascript
react实现复选框全选和反选组件效果
2020/08/25 Javascript
[40:10]2015国际邀请赛全明星表演赛
2015/08/07 DOTA
python写的ARP攻击代码实例
2014/06/04 Python
python修改字典内key对应值的方法
2015/07/11 Python
Python面向对象之继承和组合用法实例分析
2018/08/27 Python
新手如何发布Python项目开源包过程详解
2019/07/11 Python
Transpose 数组行列转置的限制方式
2020/02/11 Python
Django限制API访问频率常用方法解析
2020/10/12 Python
利用python实现后端写网页(flask框架)
2021/02/28 Python
通过css3的filter滤镜改变png图片的颜色的示例代码
2020/05/06 HTML / CSS
生物化工工艺专业应届生求职信
2013/10/08 职场文书
公务员政审个人鉴定
2014/02/25 职场文书
计算机应用专业自荐信
2014/07/05 职场文书
养成教育主题班会
2015/08/13 职场文书
小学英语教学经验交流材料
2015/11/02 职场文书
python中的3种定义类方法
2021/11/27 Python