Vue 线上项目刷新页面 404

Vue 线上项目刷新页面 404

今日测试报了一个bug，在测试服刷新当前页面404，其他没有任何错误。

Failed to load resource: the server responded with a status of 404

本地测试完全ok，各种原因查找之后是应为vue router 的原因，使用了history 模式

 

export default new Router({
  mode: 'history',
})

history模式是H5新增的api，改模式下主要有两个方法在起作用（pushState与replaceState），这两个方法都可以使得浏览器路径改变，但不刷新页面，浏览器不会去加载相应的页面，也不会去检查该路径的页面是否存在。
就因为这个特性使得我们在路由跳转时，路径改变了，其实并没有加载页面，当我们刷新的时候就会暴露我们的资源在服务器上找不到，因为vue-router设置的路径不是真实存在的路径。

经过各方资料查找最终找到解决方案

思路：将不存在的页面重定向到index.html

官方Vue Router HTML5 History 模式

在服务端nginx 进行配置

location / {
  try_files $uri $uri/ /index.html;
}

参考来源 https://blog.csdn.net/qq_38910842/article/details/103003714