解决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项目提供有价值的参考。
版权申明
本文系作者 @拾点笔记 原创发布在拾点笔记-技术笔记与工具集合分享站点。未经许可,禁止转载。
暂无评论数据