今天在测试一个前端项目的时候,遇到一个问题,从下午折腾到晚上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;
问题解决。
后来仔细翻官方文档,虽然找到了一点相关说明,但我认为官方文档表达得不够清晰,也有可能是我理解得不够。相关文档地址
特此记。