Nginx部署vue项目刷新返回空白页问题

这个问题很有可能是因为 Vue Router 的模式和 Nginx 配置之间的冲突导致的。当你在 Vue 应用中使用 Vue Router 的 `history` 模式时，URL 会变成美观的形式，就像 `http://mywebsite/myroute`，而不是 `http://mywebsite/#/myroute`。这种模式下，当你尝试通过直接访问 `http://mywebsite/myroute` 的方式来刷新或加载特定页面时，服务器会试图在其文件系统中找到对应的 `myroute` 文件。但是，对于单页面应用（SPA）来说，所有的路由实际上都是在前端处理的，所以服务器并不存在一个真实的 `myroute` 文件，这就导致了 404 错误。
为了解决这个问题，你需要更新你的 Nginx 配置，确保所有的路径都回退到你的 index.html 文件。这样一来，无论是页面初次加载，还是后续的路由切换，所有的路由逻辑都将由前端接管。
以下是一个基本的 Nginx 配置示例，可以解决这个问题：
```
location / {
try_files $uri $uri/ /index.html;
}
```
这个配置的含义是，当请求某个路径时，首先尝试访问该路径对应的文件或者目录，如果文件或目录不存在，那么就回退到 index.html 文件。请将这段配置添加到你的 Nginx 配置文件中，并根据自己的情况做适当的调整。然后重启 Nginx 服务器，问题应该能够得到解决。

 

示例：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

server { listen 5173; server_name helpme; index index.html index.htm index.php; root location ~ /tmp/ { return 403; } location / { try_files $uri $uri/ /index.html; } #error_page 404 /404.html; include enable-php.conf; location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ { expires 30d; } location ~ .*\.(js|css)?$ { expires 12h; } location ~ /\. { deny all; } access_log /www/wwwlogs/access.log; } include /www/server/panel/vhost/nginx/*.conf; ```

　　

再一个问题是，如果项目是使用原来架构，任然有index.html文件，检查原来的index.html 需要放在src文件夹的外面，即与vue.config.js 同一级目录，在回调主页时候就能解析到index.html，刷新成功了