vue history模式刷新404原因_Vue应用部署到IIS服务器路由为history模式刷新出现404解决方案...

背景简介：

用vue做微信公众号开发的小伙伴都知道，微信分享和自动登录需要，对于URL中存在'#'的地址，处理起来比较坑！所需参数会被截断丢失，导致签名错误，从而影响到前端开发小哥愉快的调用微信各种api方法。既然我们知道问题在于路由模式，那我们就改用history模式就不会存在这样的问题。但是换成history模式，就会有新的问题，就是页面刷新后，页面就无法显示了(404)，丢囖，有图有真想，如下图：

。对于这个问题，解决方案就是，我们只需要在服务器配置如果URL匹配不到任何静态资源，就跳转到默认的index.html。本文以IIS服务器配置为主：

解决方案：

1.安装IIS UrlRewrite模块，下载地址(https://www.iis.net/downloads/microsoft/url-rewrite)；

2.安装IIS UrlRewrite模块后，我们可以清楚看到IIS服务器上会显示，如下图：

多了URL重写模块，说明模块安装成功了，接下来就是写配置了，是不是迫不及待了鸭，啊哈哈哈哈。

3.服务器配置，如下图：

(1)

(2)

到目前为止服务器配置我们就配好了，然后我们便可去刷新页面，看看效果吧，页面不再提示404，可页面喂猫变成空白了鸭？你问我鸭，我也母鸡鸭，那就打开浏览器调试模式看看囖，一看如下图：

喂猫会这样呢？翻阅资料查询，才知道，刚我们写的路由配置规则加入了文件检查，那知道问题了，那就好解决了，接下来就是配置最关键的一步，来囖来囖来囖。。。

3.去除文件检查，如下图：

配置完后，我们强刷下页面，页面一切正常，怎么刷都不会404跟页面空白辣，开不开心？刺不刺激鸭？小哥哥，嗷呜^_^。

好辣，最后来个总结吧，

----------------------------------------------------------------------------------------------

总结：

Url重写设置

匹配的URL：请求的URL选择与模式匹配，模式中填写(.*)，使用选项选择通配符;即表示所有的网站都通过此模式进行检查匹配。

条件：是下面的条件选项，我们选择不是文件，逻辑分组为全部匹配。

操作：重写到index.html(根据情况，设置为自己的单页面应用首页)。

希望本文能够帮助有需要的人鸭，以上观点笔者在开发过程中遇到的问题与解决方案，欢迎各位前来交流与讨论，不喜勿喷。