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创建div 实现代码
Apr 27 Javascript
Javascript基础教程之关键字和保留字汇总
Jan 18 Javascript
js图片翻书效果代码分享
Aug 20 Javascript
完美实现bootstrap分页查询
Dec 09 Javascript
vue 打包后的文件部署到express服务器上的方法
Aug 09 Javascript
Angular中支持SCSS的方法
Nov 18 Javascript
iview中Select 选择器多选校验方法
Mar 15 Javascript
vue axios登录请求拦截器
Apr 02 Javascript
微信小程序wx.request拦截器使用详解
Jul 09 Javascript
vue使用高德地图根据坐标定位点的实现代码
Aug 22 Javascript
通过实例解析vuejs如何实现调试代码
Jul 16 Javascript
解决removeEventListener 无法清除监听的问题
Oct 30 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实现的增强性mhash函数
2015/05/27 PHP
yii2.0数据库迁移教程【多个数据库同时同步数据】
2016/10/08 PHP
Zend Framework路由器用法实例详解
2016/12/11 PHP
JS实现打开本地文件或文件夹
2021/03/09 Javascript
网上抓的一个特效
2007/05/11 Javascript
jquery的颜色选择插件实例代码
2008/10/02 Javascript
setTimeout函数兼容各主流浏览器运行执行效果实例
2013/06/13 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
2013/10/18 Javascript
js识别不同浏览器基于userAgent做判断
2014/07/29 Javascript
让JavaScript和其它资源并发下载的方法
2014/10/16 Javascript
iScroll.js 使用方法参考
2016/05/16 Javascript
JavaScript实现页面无操作倒计时退出
2016/10/22 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
2017/12/13 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
2017/12/14 Javascript
在Vue项目中引入腾讯验证码服务的教程
2018/04/03 Javascript
安装Node.js并启动本地服务的操作教程
2018/05/12 Javascript
angular1.x ui-route传参的三种写法小结
2018/08/31 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
2018/09/28 Javascript
原生js实现3D轮播图
2020/03/21 Javascript
vue随机验证码组件的封装实现
2020/02/19 Javascript
react基本安装与测试示例
2020/04/27 Javascript
Node.js API详解之 repl模块用法实例分析
2020/05/25 Javascript
three.js 制作动态二维码的示例代码
2020/07/31 Javascript
Python中exit、return、sys.exit()等使用实例和区别
2015/05/28 Python
python实现给微信公众号发送消息的方法
2017/06/30 Python
用Python调用win命令行提高工作效率的实例
2019/08/14 Python
python将图片转base64,实现前端显示
2020/01/09 Python
Python中zip函数如何使用
2020/06/04 Python
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
巴西补充剂和维生素购物网站:Natue
2019/06/17 全球购物
如何提高SQL Server的安全性
2016/07/25 面试题
学生周末回家住宿长期请假条
2014/02/15 职场文书
弘扬雷锋精神活动演讲稿
2014/03/04 职场文书
史学专业毕业生求职信
2014/05/09 职场文书
公司经理任命书
2014/06/05 职场文书
VMware虚拟机安装 Windows Server 2022的详细图文教程
2022/09/23 Servers