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

技术 · 01-25 · 309 人浏览

vue.jpg
在近期的一个基于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项目提供有价值的参考。

vue vite