vite构建时多语言替换的核心是静态扫描翻译而非运行时js更新，通过vite-plugin-auto-i18n实现零侵入文案替换，并配合vite-plugin-html生成多语言html入口，语言包静态导入、职责分离。
在 Vite 构建阶段实现多语言文案替换，核心思路是：**不依赖运行时 JS 更新文案，而是在构建时扫描源码、提取中文（或源语言）文本，自动翻译并注入对应语言的静态资源**。这样既保证首屏文案可见、利于 SEO，又避免浏览器环境无法预知语言的配置陷阱。
用 vite-plugin-auto-i18n 实现一键替换
这是目前最轻量、侵入性最小的方案，支持 Vue/React/Vue2/Vue3/JSX/TSX/Vue 文件，全程不改业务代码。
- 安装插件：
npm install vite-plugin-auto-i18n -D - 在
vite.config.ts中注册插件，并指定目标语言和翻译器（如谷歌、有道）：
import autoI18n from 'vite-plugin-auto-i18n'
export default defineConfig({
plugins: [
autoI18n({
targetLangList: ['en', 'ja', 'ko'],
translator: 'google', // 或 'youdao'
include: ['src/**/*.{js,ts,jsx,tsx,vue}']
})
]
})
插件会在构建时自动识别字符串字面量（如 "登录"、`欢迎${name}`），生成带 hash key 的 JSON 语言包（如 locales/zh-CN.json），并将所有匹配文案替换成 t('key') 形式——你后续可手动优化翻译，key 不变，增量更新安全。
配合 vite-plugin-html 动态生成多语言 HTML 入口
Vite 默认只产出一个 index.html，但国际化常需 /en/index.html、/zh/index.html 等独立入口。需靠构建脚本 + 插件协同完成：
- 写一个
build-i18n.js脚本，遍历语言列表，每次设置环境变量后执行构建：process.env.LANG = 'en'; require('vite').build() - 在
vite.config.ts中使用vite-plugin-html的inject选项，将当前语言的title、lang属性、内联 i18n 数据注入 HTML 模板：
html({
inject: {
lang: process.env.LANG || 'zh-CN',
title: i18nTitles[process.env.LANG || 'zh-CN']
}
})
注意：HTML 模板中不能写 document.documentElement.lang = xxx，因为那是运行时行为，静态 HTML 无法响应；必须由构建插件在生成时写死。
语言包按需加载与框架层解耦
构建期文案替换解决的是“骨架文案”，而运行时切换（比如用户点按钮换语言）仍需框架 i18n 库支持，二者要职责分明：
- vue-i18n / react-i18next 负责：动态加载语言包、插值渲染、复数规则、本地缓存语言偏好
- 构建插件负责：把源码里的中文替换成 key、生成各语言 JSON、产出带正确
lang属性的 HTML - 避免混用：不要让
vue-i18n的createI18n去读取构建插件生成的 JSON 并热重载——那会破坏构建确定性；应统一从import zh from './locales/zh-CN.json'静态导入
目录建议保持清晰：src/i18n/locales/zh-CN.json（构建产出）、src/i18n/index.ts（封装 useI18n 和语言切换逻辑）。
注意事项与避坑点
几个高频踩坑项必须提前规避：
-
环境变量误用：Vite 配置文件在 Node 环境执行，
process.env.LANG只能用于构建时判断，不能在组件里读取它来决定语言——要用navigator.language或 localStorage -
public 资源未复制：favicon、图片等不会自动进
/en/子目录，需在rollupOptions.output.assetFileNames中手动配置路径映射 -
HTML 模板内联脚本风险：若模板里写了
<script>console.log('登录')</script>，这类字符串默认不被插件扫描，需显式配置includeInHtml: true选项 -
第三方 UI 组件文案：Element Plus、Ant Design 等自带中文，需单独配置其语言包（如
locale: zhCn），不能指望自动翻译插件覆盖
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
