摘要:安装即可跑,零配置开箱即用Vue、React、原生项目全部通吃内置谷歌翻译,支持 100+ 语言极小包体,运行时动态切换语言
作为一名前端开发,给项目做多语言早已是家常便饭。
可每次面对成百上千条文案,“一行行手动翻译 + 维护 N 个 JSON 文件”仍然是让人头秃的体力活。
安装即可跑,零配置开箱即用Vue、React、原生项目全部通吃内置谷歌翻译,支持 100+ 语言极小包体,运行时动态切换语言使用 3 步走npm i -D i18n-auto-extractornpx i18n-auto-extractor # 生成配置文件// 代码里包一层即可const title = $at('欢迎来到我的网站')构建后会自动生成:
locales/├─ zh.json // 原中文├─ en.json // 自动翻译├─ fr.json // ...完全零侵入,Babel 扫描无需改代码Vite / Webpack / Rollup 插件形态全覆盖Google、有道、百度翻译源任意切换增量构建,只翻译新增文案省流量npm i -D vite-auto-i18n-plugin@^1.0.23npm i -D vite-auto-i18n-plugin@^1.0.23// vite.config.tsimport viteAutoI18n from 'vite-auto-i18n-plugin'export default defineConfig({ plugins: [ vue, viteAutoI18n({ targetLangList: ['en', 'ja', 'ko'], translator: new YoudaoTranslator({ appId: 'xxx', appKey: 'xxx' }) }) ]})构建完成后自动生成 lang/index.json,直接引入即可使用。
i18n-cli命令行一把梭,老项目 5 分钟上线多语言
CLI 一键扫描并替换中文为 t('xxx')Excel 导入导出,翻译团队协作零门槛支持百度、谷歌、有道多翻译源增量模式仅处理新增文案,避免重复劳动使用 2 步走npm i -g @ifreeovo/i18n-extract-cliit --locales en,ja # 全量翻译it --incremental # 仅增量产物示例:
// locales/zh-CN.json{ "a1b2c3": "提交订单" }// locales/en.json{ "a1b2c3": "Submit Order" }来源:不秃头程序员