构建时预渲染翻译内容指在构建阶段生成含真实译文的多语言静态HTML文件，而非运行时JS替换；Next.js需用generateStaticParams+dynamic="error"，Vite需配合prerender插件显式配置多语言路径，Vue CLI需确保无头浏览器能识别语言状态。
构建时预渲染翻译内容 ≠ 在 HTML 里加 lang 或 data-i18n
构建阶段预渲染翻译内容，是指在 npm run build 过程中，就生成带真实译文的完整 HTML 文件（比如 /en/about/index.html 和 /zh/about/index.html），而不是等用户点击语言切换按钮再用 JS 替换文本。这和运行时 i18n 完全不同——前者输出多套静态文件，后者只输出一套 HTML + 一套 JSON + 一堆 JS。
Next.js App Router 必须用 generateStaticParams + dynamic = "error"
如果你用 Next.js 13+ App Router，别写 prerender_html，也别手动调 Puppeteer。框架原生支持多语言静态生成，但必须满足两个硬条件：
-
generateStaticParams返回每种语言的组合，例如[{ lang: 'zh', slug: 'about' }, { lang: 'en', slug: 'about' }] - 对应页面组件顶部声明
export const dynamic = "error"（不是"force-static"，那个已被废弃） - 路径结构要匹配：若想生成
/zh/about，路由文件必须是app/[lang]/about/page.tsx，且[lang]是动态段 - 构建后检查
out/zh/about/index.html是否真实存在并含中文文本——如果只有out/_next/目录，说明没生效
Vite + i18n 插件需配合 vite-plugin-prerender 手动触发多语言渲染
Vite 没有内置多语言 SSG 支持，i18n 插件（如 @inlang/paraglide-js）只管运行时切换，不生成多份 HTML。真要构建时预渲染，得自己驱动 vite-plugin-prerender：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 不能只传
routes: ['/about']，得显式列出所有语言路径：routes: ['/zh/about', '/en/about'] - 确保每个路径请求能正确注入语言上下文——比如在
renderAfterTime里等window.__LANG__ = 'zh'被设好，或用 URL path 做判断 - 避免在
main.ts里写if (location.pathname.startsWith('/zh')) {...}—— 构建时无location，会出错 - 输出目录需按语言分隔，否则
/zh/about和/en/about会互相覆盖
Vue CLI 项目用 prerender-spa-plugin 时，语言状态必须可被无头浏览器识别
这个插件默认只跑一次 page.goto('/') ，没法自动切语言。你要么：
- 改写入口逻辑，在挂载前读取 URL path 或 hash 来决定语言，例如
const lang = location.pathname.split('/')[1] || 'zh' - 配置插件多次运行：为每种语言单独调一次
prerender-spa-plugin，staticDir指向不同子目录（如dist/zh、dist/en） - 禁用所有依赖客户端 localStorage 的语言检测逻辑——构建时 localStorage 是空的，会导致 fallback 到默认语言甚至报错
- 验证生成的 HTML 是否含真实译文：打开
dist/zh/index.html，搜索 “欢迎”；如果看到的是data-i18n="welcome"或空容器，说明预渲染失败
真正落地的关键点不在翻译数据怎么组织，而在于构建流程能否为每种语言启动一次独立的无头浏览器渲染上下文，并保证该上下文内语言状态稳定、数据可同步获取。漏掉其中任一环，生成的就只是带占位符的壳文件，不是真正的预渲染。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
