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 相关文章推荐
TextArea不支持maxlength的解决办法(jquery)
Sep 13 Javascript
javascript框架设计读书笔记之数组的扩展与修复
Dec 02 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
Aug 06 Javascript
jQuery动画效果实现图片无缝连续滚动
Jan 12 Javascript
js闭包引起的事件注册问题介绍
Mar 29 Javascript
Javascript的比较汇总
Jul 25 Javascript
JavaScript严格模式详解
Jan 16 Javascript
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
JS如何设置元素样式的方法示例
Aug 28 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
Nov 21 Javascript
vue单页开发父子组件传值思路详解
May 18 Javascript
Ajax实现局部刷新的方法实例
Mar 31 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编程中10个最常见的错误
2014/08/08 PHP
smarty表格换行实例
2014/12/15 PHP
PHP使用CURL实现多线程抓取网页
2015/04/30 PHP
PHP会员找回密码功能的简单实现
2016/09/05 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
javascript十个最常用的自定义函数(中文版)
2009/09/07 Javascript
改变隐藏的input中value的值代码
2013/12/30 Javascript
js replace替换所有匹配的字符串
2014/02/13 Javascript
将数字转换成大写的人民币表达式的js函数
2014/09/21 Javascript
使用window.prompt()实现弹出用户输入的对话框
2015/04/13 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
2015/08/24 Javascript
每日十条JavaScript经验技巧(一)
2016/06/23 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
2016/09/20 Javascript
原生ajax处理json格式数据的实例代码
2016/12/25 Javascript
NodeJS实现自定义流的方法
2018/08/01 NodeJs
微信小程序实现复选框效果
2018/12/28 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
2019/07/15 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
2020/04/08 Javascript
[07:39]第一届亚洲邀请赛回顾视频
2017/02/14 DOTA
Python字符转换
2008/09/06 Python
Python实现端口复用实例代码
2014/07/03 Python
python的类方法和静态方法
2014/12/13 Python
讲解Python中的标识运算符
2015/05/14 Python
python3 模拟登录v2ex实例讲解
2017/07/13 Python
3个用于数据科学的顶级Python库
2018/09/29 Python
python中单下划线(_)和双下划线(__)的特殊用法
2019/08/29 Python
python实现矩阵和array数组之间的转换
2019/11/29 Python
python numpy实现多次循环读取文件 等间隔过滤数据示例
2020/03/14 Python
利用4行Python代码监测每一行程序的运行时间和空间消耗
2020/04/22 Python
通过代码实例了解Python异常本质
2020/09/16 Python
详解css3 object-fit属性
2018/07/27 HTML / CSS
解决html5中video标签无法播放mp4问题的办法
2017/05/07 HTML / CSS
怎样声明接口
2014/09/19 面试题
学校火灾防控方案
2014/06/09 职场文书
运动员加油词
2015/07/18 职场文书
redis lua限流算法实现示例
2022/07/15 Redis