先讲一个我上周在群里看到的求助前端把 Vue 项目打包丢到服务器首页打开正常列表页跳转也正常结果一点刷新直接 Nginx 404。群里有人回了一句“加一行 try_files 就行”但又有人追问“为什么加了就好了”。那个场景让我想起自己刚接触 SPA 部署时踩过的坑其实这个配置不是背下来就完事它背后是 Nginx 的请求匹配机制、前端路由模式的适配、以及静态资源服务方式的综合问题。如果你也遇到过location / { try_files $uri $uri/ /index.html; }这行“神药”或者你正被页面刷新 404、资源 404、接口 404 折腾这篇就顺着这条配置线把原理和实操一起讲透。
前端部署必知：Nginx try_files与SPA刷新404的解决方案
先讲一个我上周在群里看到的求助前端把 Vue 项目打包丢到服务器首页打开正常列表页跳转也正常结果一点刷新直接 Nginx 404。群里有人回了一句“加一行 try_files 就行”但又有人追问“为什么加了就好了”。那个场景让我想起自己刚接触 SPA 部署时踩过的坑其实这个配置不是背下来就完事它背后是 Nginx 的请求匹配机制、前端路由模式的适配、以及静态资源服务方式的综合问题。如果你也遇到过location / { try_files $uri $uri/ /index.html; }这行“神药”或者你正被页面刷新 404、资源 404、接口 404 折腾这篇就顺着这条配置线把原理和实操一起讲透。
