如何在SSG/SSR模式下将静态生成网站接入Nuxt3子路由

核心需求 #

在SSG静态站点生成、SSR服务端渲染场景下，于构建阶段将Nuxt路由关联到已静态生成的外部网站：

• 本次对接的静态站点为Histoire（类Storybook的组件文档工具），全量构建产物存放在.histoire/dist目录，包含入口index.html，已完成相对路径基准URL配置
• 预期效果：开发环境下可通过http://localhost:3000/doc/stories路径访问该静态站点

已梳理的实现方向 #

• 方向1（SSG模式适配）：Nuxt全量文件与路由生成完成后，将Histoire静态资源复制到Nuxt的public目录
• 方向2：将静态Vue应用的html、js、css资源嵌入路径为pages/doc/stories的Nuxt页面组件，暂未找到可落地的具体实现方式

方向1测试结果 #

测试操作：Nuxt应用构建前，将.histoire/dist下所有构建产物复制到Nuxt的public/doc/stories目录

• 正常表现：http://localhost:3000/doc/stories/根路径可正常加载运行
• 异常表现：直接访问具体故事页面返回404错误，例如meow示例组件路径http://localhost:3000/doc/stories/story/components-atoms-meow-story-vue?variantId=_default无法正常打开
• 问题根因：Histoire构建产物为Vue单页应用，所有子路径路由需要fallback到入口index.html做客户端路由分发，Nuxt默认不会对public目录下的子路径做该类转发处理

官方支持现状 #

Nuxt官方已规划可插拔子应用（多应用）相关RFC，后续将支持嵌入多个Nuxt应用，但当前版本暂不支持直接接入已构建完成的外部静态应用。

内容的提问来源于stack exchange，提问作者Lyokolux