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[js]获取url参数的代码
Oct 17 Javascript
JS动态添加option和删除option(附实例代码)
Apr 01 Javascript
Node.js中HTTP模块与事件模块详解
Nov 14 Javascript
基于jQuery实现仿百度首页选项卡切换效果
May 29 Javascript
返回函数的JavaScript函数
Jun 14 Javascript
利用JavaScript阻止表单提交的两种方法
Aug 11 Javascript
Javascript6中字符串的四个新用法分享
Sep 11 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
Jan 25 Javascript
js canvas画布实现高斯模糊效果
Nov 27 Javascript
详解JS实现系统登录页的登录和验证
Apr 29 Javascript
Vue3 中的数据侦测的实现
Oct 09 Javascript
适合后台管理系统开发的12个前端框架(小结)
Jun 29 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
CodeIgniter中使用cookie的三种方式详解
2014/07/18 PHP
PHP常用编译参数中文说明
2014/09/27 PHP
php实现向javascript传递数组的方法
2015/07/27 PHP
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
2013/04/21 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
2015/10/25 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
2015/11/18 Javascript
JS实现的多张图片轮流播放幻灯片效果
2016/07/22 Javascript
原生js验证简洁注册登录页面
2016/12/17 Javascript
JS实现加载时锁定HTML页面元素的方法
2017/06/24 Javascript
使用jQuery实现页面定时弹出广告效果
2017/08/24 jQuery
vue2.0使用swiper组件实现轮播的示例代码
2018/03/03 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
2018/12/10 jQuery
vuex实现的简单购物车功能示例
2019/02/13 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
2019/10/12 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
2019/11/06 Javascript
python实现360皮肤按钮控件示例
2014/02/21 Python
Python设计模式之抽象工厂模式
2016/08/25 Python
使用Python对微信好友进行数据分析
2018/06/27 Python
利用python提取wav文件的mfcc方法
2019/01/09 Python
使用Python实现批量ping操作方法
2020/05/06 Python
Python并发请求下限制QPS(每秒查询率)的实现代码
2020/06/05 Python
Django视图、传参和forms验证操作
2020/07/15 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
python连接mysql数据库并读取数据的实现
2020/09/25 Python
基于Python采集爬取微信公众号历史数据
2020/11/27 Python
CSS3轻松实现清新 Loading 效果的简单实例
2016/06/06 HTML / CSS
Otticanet澳大利亚:最顶尖的世界名牌眼镜, 能得到打折季的价格
2018/08/23 全球购物
介绍Java的内部类
2012/10/27 面试题
土木工程毕业生推荐信
2013/10/28 职场文书
行政人员工作职责
2013/12/05 职场文书
大学新生欢迎词
2014/01/10 职场文书
普通党员对照检查材料
2014/08/28 职场文书
2014个人四风对照检查材料思想汇报
2014/09/18 职场文书
Nginx配置文件详解以及优化建议指南
2021/09/15 Servers
用PYTHON去计算88键钢琴的琴键频率和音高
2022/04/10 Python