解决Vue 3和Vite 3项目在Nginx服务器上的页面刷新404问题

在近期的一个基于Vue 3和Vite 3的小项目开发中，我遇到了一个有趣的挑战。在本地开发环境中，项目的运行和刷新都表现正常，但一旦通过build打包并部署到服务器上，页面刷新时就会意外地跳转到404页面。经过深入的排查和尝试多种解决方案，我最终确定问题并非出在项目代码上。经过对Nginx服务器的配置进行调整，我成功解决了这个问题。

解决方案一：伪静态设置

在Nginx的配置文件中，可以通过设置伪静态规则来确保当访问的资源不存在时，服务器能够返回正确的index.html文件。这通常是通过try_files指令来实现的，如下所示：

location / {
    try_files $uri $uri/ /你的项目发布目录/index.html;
}

这里的/你的项目发布目录/应该与你在vite.config.ts中配置的base选项保持一致。

解决方案二：优化try_files指令

另一种方式是直接在location / {}块中增加try_files指令，并指定默认的索引文件，如下所示：

location / {
    index index.html index.htm index.php;
    try_files $uri $uri/ /你的项目发布目录/index.html;
}

注意，这里的/你的项目发布目录/同样需要与vite.config.ts中的base设置相匹配。

解决方案三：使用rewrite进行重写

如果你更倾向于使用rewrite指令来实现相同的效果，可以这样做：

location / {
    index index.html index.htm index.php;
    try_files $uri $uri/ @router;
}

location @router {
    rewrite ^.*$ /你的项目发布目录/index.html last;
}

在这个配置中，如果请求的资源不存在，Nginx将会执行@router块中的rewrite指令，将请求重定向到index.html文件。

注意事项

• 在进行Nginx配置时，请确保将/你的项目发布目录/替换为实际的项目发布目录，这通常与vite.config.ts中的base设置相匹配。
• 重启Nginx服务器以应用新的配置。

通过以上的配置调整，你应该能够解决在Vue 3和Vite 3项目中遇到的页面刷新404问题。这些解决方案不仅适用于当前的项目，也可以为其他类似的Web项目提供有价值的参考。