很多人部署 Vue 项目的时候，都会遇到一个很烦的问题：
页面直接打开是正常的，但只要一刷新，立马 404。
这个问题其实跟代码关系不大，十有八九都是 Nginx 配置的问题。
Vue 项目本身是单页应用，页面跳转靠的是前端路由。比如你访问 /user、/order/detail 这些地址，服务器上其实根本就没有对应的文件或目录，都是 Vue 在浏览器里自己解析的。
问题就出在这里——
第一次访问没问题，是因为入口走的是 index.html，
一刷新，浏览器会把当前地址原封不动地丢给服务器，Nginx 一看：
“/user？/order？我目录里没这玩意啊。”
于是直接返回 404。
解决办法其实非常简单，只要让 Nginx 在找不到文件的时候，统一回到 index.html 就行。
在宝塔里操作也很简单，进网站设置，找到“伪静态”，把原来的内容清掉，直接加上这一段：
location / {
try_files $uri $uri/ /index.html;
}
保存就可以了，一般不需要重启。
这段配置的意思也不复杂，大概就是三步：
先看看你访问的是不是一个真实文件，比如 JS、CSS、图片；
如果不是文件，再看看是不是一个目录；
如果还不是，那就直接返回 index.html。
这样一来，不管你刷新的是 /login、/user/info 还是 /xxx/yyy，服务器最终都会把入口页面给你，剩下的路由就交给 Vue 自己去处理，404 自然就没了。
这个写法是 Vue、React 这类单页项目在 Nginx 下的标准用法，基本属于必配项。
只要你用的是 history 模式，又是静态部署，早晚都会用到。
一句话总结就是：
Vue 刷新 404，不是项目问题，是服务器没有兜底。
把 try_files 这行加上，基本就能一把解决。
如果你后面还有二级目录部署、多个前端项目共用一个 Nginx、或者 history/hash 混用的问题，这一套配置也能继续往上改，不用推翻重来。
