如何在Vue I18n项目中自动生成多语言翻译文件？

你可以通过Vue I18n官方提供的@intlify/unplugin-vue-i18n插件实现自动扫描提取翻译键、生成/更新多语言文件的需求，完全替代手动操作，步骤如下：

1. 安装依赖 #

在项目根目录执行安装命令：

npm install @intlify/unplugin-vue-i18n --save-dev
# 或使用 yarn
yarn add @intlify/unplugin-vue-i18n -D
# 或 pnpm
pnpm add @intlify/unplugin-vue-i18n -D

2. 配置构建工具（以Vite为例） #

在vite.config.js中引入并配置插件，指定扫描范围等参数：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueI18n from '@intlify/unplugin-vue-i18n/vite'

export default defineConfig({
  plugins: [
    vue(),
    VueI18n({
      include: ['./src/**/*.{vue,js,ts}'], // 要扫描的所有含翻译的文件
      runtimeOnly: false, // 启用编译时提取功能
      compositionOnly: true, // 适配Vue3组合式API
      fullInstall: true
    })
  ]
})

如果使用Webpack，只需将插件替换为@intlify/unplugin-vue-i18n/webpack，配置逻辑一致。

3. 添加提取命令到package.json #

在package.json的scripts字段中新增提取命令：

{
  "scripts": {
    // 其他脚本...
    "i18n:extract": "vue-i18n-extract --include './src/**/*.{vue,js,ts}' --output './src/locales' --locales 'en,de,ja'"
  }
}

参数说明：

• --include：指定要扫描的文件范围，支持通配符
• --output：指定多语言文件的输出目录（比如src/locales）
• --locales：指定需要生成的语言列表，用逗号分隔

4. 执行提取命令 #

在终端运行：

npm run i18n:extract
# 或 yarn i18n:extract
# 或 pnpm i18n:extract

执行后会自动完成以下操作：

• 扫描所有指定文件中的t("xxx")、useI18n().t("xxx")（组合式API）、$t("xxx")（选项式API）调用，提取所有翻译键
• 在输出目录生成/更新en.json、de.json、ja.json等语言文件
• 新提取的键会自动添加到各语言文件中，对应值为空（方便翻译人员填写）；已存在的键会保留原有翻译内容
• 若en.json不存在，会自动创建并将翻译键的原文本作为默认值，其他语言文件对应键值为空

注意事项 #

• 如果项目中使用了自定义翻译函数名（而非t/$t），可以通过插件的parser配置项自定义识别规则
• 确保扫描路径覆盖所有包含翻译调用的文件，避免遗漏

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