HTML文件怎么国际化？自动化打包维护配置-html教程-PHP中文网

HTML多语言输出核心是用多个HtmlWebpackPlugin实例生成独立HTML文件（如index.zh.html、index.en.html），通过templateParameters注入各语言文案，配合EJS模板渲染，确保SEO友好、无闪烁、CDN缓存干净。

html文件怎么国际化？自动化打包维护配置

HTML 文件国际化不是“加个 lang 属性就完事”，而是要让文本可替换、路径可适配、构建可复用。自动化打包维护配置的关键，是把语言维度从 HTML 内容里抽出来，再和构建流程对齐——否则每次改语言就得手动复制文件、改路径、修 script 标签。

核心是让每个语言生成独立的 HTML 文件，而不是靠 JS 动态切换。这样 SEO 友好、首屏无闪烁、CDN 缓存也干净。

每个语言对应一个 HtmlWebpackPlugin 实例，filename 设为 index.zh.html、index.en.html 等
templateParameters 传入该语言的文案对象，比如 { title: '我的应用', submit: '提交' }
模板里用（EJS）或渲染，别硬编码文本
注意：Webpack 5+ 默认不启用 EJS，需安装 html-webpack-plugin 并确保模板后缀是 .ejs 或显式配置 loader
如果用了 clean-webpack-plugin，它会清空整个 dist 目录，多语言文件不会互相覆盖，但得确认你没误删其他静态资源

Vite 不重写 index.html 里的 src 属性，它只靠插件注入最终产出的 chunk 路径。路径出错，90% 是约定没对齐。

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

index.html 必须放在项目根目录，Vite 才认它为入口模板
<script src="./main.js"></script> 必须用相对路径（./ 开头），不能写 /src/main.js 或 src/main.js
build.base 配置必须和部署路径一致：根域名部署设 base: './'，子路径如 /app/ 就设 base: '/app/'
构建后检查 dist/index.zh.html 里的 <script></script> 标签是否已变成类似 <script type="module" src="/assets/index-abc123.js"></script> —— 没变就是上面某条没满足
不要在 index.html 里写 <script src="/public/app.js"></script>，这绕过构建，没法哈希、无法压缩、环境变量也不生效

这是轻量级客户端方案的核心，但标记漏了、属性写错、lang 同步缺失，都会导致部分文案不更新或读音错误。

所有要翻译的元素必须显式加 data-i18n，值是语言包里的键名，比如
placeholder、title、alt 这些属性得用带后缀的写法：data-i18n-placeholder、data-i18n-title
切换语言后，必须同步更新 document.documentElement.lang（如 'zh-Hans'），还要遍历所有带 lang 的子元素单独设值——浏览器不继承根节点的 lang
语言包 JSON 必须扁平结构，locales/zh.json 和 locales/en.json 键名完全一致；缺翻译项留空字符串，别直接删 key，否则 JS 查不到就留白
别在、<script></script>、里加 data-i18n，这些节点不渲染为可见文本，加了无效