Vue3项目Build后部署在Nginx上F5刷新页面空白或404 环境{callout color="#4def9b"}vue-cli 5.xvue-router 4.xNginx{/callout}综述{callout color="#4d60ef"}使用Vue3项目Vue-router4开发完毕后项目Build打包部署线上环境后，首页能正常访问菜单内点击切换也没有问题，但当你刷新页面后，则出现 404 Not Found，故在此记录一下解决办法{/callout}解决思路{callout color="#f34444"}在与chatGPT进行深刻激烈的探讨后，确定了是Nginx的问题，根据chatGPT的引导进行配置依旧无法解决，刷新页面时访问的资源在服务端找不到，因为此时vue-router设置路由地址被当作url地址，此时的地址路径肯定不是真实存在的，所以出现404现象。之所以出现上面的现象，是因为在nginx配置的根目录/www/wwwroot/dist下面压根没有'XXX/xxx/xxx'这个真实资源存在，这些访问资源都是在js里渲染的。{/callout}服务端nginx的一开始配置如下（假设域名为：www.vvhan.com）： server { listen 80; server_name www.vvhan.com; index index.html; root /www/wwwroot/dist; }如上出现404的原因是由于在这个域名根目录/www/wwwroot/dist下面压根就没有'XXX/xxx/xxx'这个真实目录存在。解决问题在服务端nginx配置里添加vue-route的跳转设置，正确配置如下： server { listen 80; server_name www.vvhan.com; index index.html; root /www/wwwroot/dist; #vue-router配置 location / { try_files $uri $uri/ @router; index index.html; } location @router { rewrite ^.*$ /index.html last; } }{callout color="#efa44d"}重启 nginx 后，问题就迎刃而解了。{/callout}