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 相关文章推荐
重定向实现代码
Nov 20 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
May 24 Javascript
jquery中的$(document).ready()使用小结
Feb 14 Javascript
JS实现跟随鼠标闪烁转动色块的方法
Feb 26 Javascript
javascript实现简单的贪吃蛇游戏
Mar 31 Javascript
BootStrap网页中代码显示用法详解
Oct 21 Javascript
微信小程序 video组件详解
Oct 25 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
Sep 29 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
Nov 02 Javascript
JS实现的点击按钮图片上下滚动效果示例
Jan 28 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
Sep 16 Javascript
解决vue-router 切换tab标签关闭时缓存问题
Jul 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
PHP 数组遍历方法大全(foreach,list,each)
2010/06/30 PHP
探讨fckeditor在Php中的配置详解
2013/06/08 PHP
解析ajax事件的调用顺序
2013/06/17 PHP
PHP垃圾回收机制引用计数器概念分析
2013/06/24 PHP
php实例分享之html转为rtf格式
2014/06/02 PHP
apache php mysql开发环境安装教程
2016/07/28 PHP
PHP实现的方程求解示例分析
2016/11/11 PHP
PC端微信扫码支付成功之后自动跳转php版代码
2017/07/07 PHP
比Jquery的document.ready更快的方法
2010/04/28 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
2013/01/09 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
2013/11/28 Javascript
js实现一个链接打开两个链接地址的方法
2015/05/12 Javascript
JavaScript动态设置div的样式的方法
2015/12/26 Javascript
jQuery的promise与deferred对象在异步回调中的作用
2016/05/03 Javascript
jQuery双向列表选择器select版
2016/11/01 Javascript
深入理解Nodejs Global 模块
2017/06/03 NodeJs
knockoutjs模板实现树形结构列表
2017/07/31 Javascript
详解从NodeJS搭建中间层再谈前后端分离
2018/11/13 NodeJs
原生js实现Flappy Bird小游戏
2018/12/24 Javascript
vue实现侧边栏导航效果
2019/10/21 Javascript
VUEX采坑之路之获取不到$store的解决方法
2019/11/08 Javascript
vue 解除鼠标的监听事件的方法
2019/11/13 Javascript
[02:05]2014DOTA2西雅图国际邀请赛 BBC第二天小组赛总结
2014/07/11 DOTA
Python unittest 简单实现参数化的方法
2018/11/30 Python
python读取各种文件数据方法解析
2018/12/29 Python
强悍的Python读取大文件的解决方案
2019/02/16 Python
使用python PIL库实现简单验证码的去噪方法步骤
2019/05/10 Python
精选鞋类、服装和配饰的全球领先目的地:Bodega
2021/02/27 全球购物
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
四风存在的原因分析
2014/02/11 职场文书
主题团日活动总结
2014/06/25 职场文书
外贸业务员岗位职责
2015/02/13 职场文书
中学生自我评价2015
2015/03/03 职场文书
小学音乐课教学反思
2016/02/18 职场文书
Win11 25163.1010更新补丁KB5016904推送,测试服务验证管道(附更新修复汇总)
2022/07/23 数码科技
Python使用pandas导入csv文件内容的示例代码
2022/12/24 Python