vue路由history模式刷新404问题解决方案

由于vue单页面的原因，需要借助路由来实现页面的切换，主要有两个方法，history, 和 hash。hash的话在URL上带有 ’#’ 的地址，处理起来比较坑，还有就是路由比较丑，最坑的是，做 微信和支付宝 的时候回调地址，不允许加 ？好，只能用rest 风格。

 

但是换成history模式，就会有个新的坑，就是当用户刷新页面就无法显示了（404）。对于这个问题，我们只需要在服务器配置如果URL匹配不到任何静态资源，就跳转到默认的index.html。

在网上搜了，一吨教程，都是无效的，我真的是醉了，最后只能去看官方文档了，

看官方文档真的很重要，看官方文档真的很重要，看官方文档真的很重要。

先说一下原因：

你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

反正官网说了挺多中后台的配置的，其他的我都没有用过，我就说两种我用过的：

第一种是nodeJS + express：

Usage

中间件可以通过NPM获得，并且可以很容易地添加。

npm install --save connect-history-api-fallback

引入：

const history = req