用 nginx 托管 Nuxt3 SSG 的动态路由回退问题

用 nginx 托管 Nuxt3 SSG 的静态文件,遇到动态路由无法回退的问题

今天在测试一个前端项目的时候,遇到一个问题,从下午折腾到晚上11点。

这个项目是基于 nuxt v3.6, 使用命令nuxi generate生成静态文件,用 nginx 托管。在 nuxt3 中,如果使用配置 ssr: true, 运行nuxi generate会在构建时预先渲染应用程序的路由。

以前只玩过 SPA 的渲染方式,只有一个入口文件 index.html,部署时 nginx 的配置加一行路由回退指令 try_files $uri $uri/ /index.html; 。这次也按照这个思路配置了,但这导致了问题。

由于 SSG 渲染方式会在构建时预先渲染应用的路由到对应的文件,但是动态路由没有渲染到独立的文件,nginx 找不到这个文件时回退到 index.html,但此时的 index.html 不是一个fallback page

例如:http://localhost/email/verify/c36962380d3db482872f619f2b92046f6607d1fd 应该路由到 pages/email/verify/[token].vue , 但在这里没有发生。

排查半天后,发现 SSG 渲染方式的回退页面是 200.html,只要把 nginx 配置改成 try_files $uri $uri/ /200.html; 问题解决。

后来仔细翻官方文档,虽然找到了一点相关说明,但我认为官方文档表达得不够清晰,也有可能是我理解得不够。相关文档地址

特此记。

Licensed under CC BY-NC-SA 4.0
comments powered by Disqus
Built with Hugo
Theme Stack designed by Jimmy