vue项目上线后，刷新页面出现404

vue项目上线后，刷新页面出现404

原因

在vue项目中使用了history模式实现路由跳转

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

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

解决

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

官方Vue Router提供了几种解决方法

我们采用配置nginx的方式

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