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 相关文章推荐
My Desktop :) 桌面式代码
Dec 29 Javascript
Web前端设计模式  制作漂亮的弹出层
Oct 29 Javascript
Javascript 八进制转义字符(8进制)
Apr 08 Javascript
Jquery取得iframe下内容的方法
Nov 18 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
May 07 Javascript
JavaScript面向对象之私有静态变量实例分析
Jan 14 Javascript
Web程序员必备的7个JavaScript函数
Jun 14 Javascript
修改jquery中dialog的title属性方法(推荐)
Aug 26 Javascript
JS匿名函数实例分析
Nov 26 Javascript
vue实现个人信息查看和密码修改功能
May 06 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
Aug 23 Javascript
微信小程序全局变量功能与用法详解
Jan 22 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
动漫女神老婆无限好,但日本女生可能就不是这么一回事了!
2020/03/04 日漫
PHP5 安装方法
2006/10/09 PHP
PHP常用函数小技巧
2008/09/11 PHP
php 问卷调查结果统计
2015/10/08 PHP
PHP magento后台无法登录问题解决方法
2016/11/24 PHP
PHP实现对xml的增删改查操作案例分析
2017/05/19 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
基于jquery的一个拖拽到指定区域内的效果
2011/09/21 Javascript
jQuery ui插件的使用方法代码实例
2013/05/08 Javascript
文本框文本自动补全效果示例分享
2014/01/19 Javascript
js replace替换所有匹配的字符串
2014/02/13 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
2014/09/23 Javascript
js实现可旋转的立方体模型
2016/10/16 Javascript
Vue.js实现无限加载与分页功能开发
2016/11/03 Javascript
详解angular中如何监控dom渲染完毕
2017/01/03 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
2017/03/17 Javascript
实例解析ES6 Proxy使用场景介绍
2018/01/08 Javascript
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
JavaScript 下载svg图片为png格式
2018/06/21 Javascript
Vue如何实现响应式系统
2018/07/11 Javascript
详解JavaScript的变量
2019/04/04 Javascript
JS手写一个自定义Promise操作示例
2020/03/16 Javascript
[02:04]2014DOTA2国际邀请赛 DK一个时代的落幕
2014/07/21 DOTA
Python实现字典依据value排序
2016/02/24 Python
Python标准库使用OrderedDict类的实例讲解
2019/02/14 Python
python实现定时压缩指定文件夹发送邮件
2020/12/22 Python
基于python3 pyQt5 QtDesignner实现窗口化猜数字游戏功能
2019/07/15 Python
python psutil模块使用方法解析
2019/08/01 Python
python对象销毁实例(垃圾回收)
2020/01/16 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
python实现经典排序算法的示例代码
2021/02/07 Python
英国领先的男士服装和时尚零售商:Burton
2017/01/09 全球购物
如何提高JDBC的性能
2013/04/30 面试题
外企求职信范文分享
2013/12/31 职场文书
超市收银员岗位职责
2015/04/07 职场文书
2015年社区综治工作总结
2015/04/21 职场文书