puppy

告别多语言地狱！AI-Vue-I18n让国际化开发变得简单

作为Vue开发者，你是否也经历过这样的痛苦？

• 产品经理：“这个按钮文案要改一下” → 你需要修改5种语言文件
• 测试同学：“日语翻译好像不太准确” → 你需要在代码中翻找对应的$t() key
• 新功能上线：“为什么这里还是显示中文？” → 你忘记添加翻译了…

今天给大家介绍一个能彻底解决这些痛点的神器：AI-Vue-I18n，一个基于AI的Vue多语言自动化工具。地址在这里，欢迎大家star。

为什么我们需要它？

想象一下这样的开发场景：

1. 你正在开发一个跨国电商平台
2. 产品需要支持中、英、日、韩四种语言
3. 每次文案调整都要同步所有语言版本
4. 新功能开发时经常忘记添加翻译
5. 不同翻译人员对同一术语的翻译不一致

传统解决方案需要：

• 手动维护多个语言文件
• 在代码中插入大量$t('xxx')
• 频繁与翻译团队（其实是翻译软件）沟通
• 持续检查未翻译文本

AI-Vue-I18n 的出现，让这一切变得简单！

它是如何工作的？

魔法般的自动化流程

核心技术解析

1. 智能文本提取：通过AST分析精准提取所有中文文本
2. AI翻译引擎：支持OpenAI/DeepSeek等主流AI，保持术语一致
3. 自动代码转换：通过Loader实现开发时写中文，运行时自动替换

实际代码示例

  以下是vue2源码示例代码

<template>
  <div>
    <Child props="参数" />
    <div>测试</div>
    <div>{{ data }}</div>
  </div>
</template>   
<script>
export default {
   name: 'HelloWorld',
   components: {
      Child,
   },
   data() {
      return {
         data: '文本'
      }
   },
}
</script>

  插件会将文件里的中文文本自动提取出来，如‘参数’、‘文本’等，再将中文生成对应的 md5 作为key，然后调取ai获取翻译值，生成对应的翻译文件如：

// zh-cn.js
{
  "asf45e": "参数",
  "1e24cf": "测试",
  "sa34dd": "文本"
}
// en.js
{
  "asf45e": "Parameter",
  "1e24cf": "Test",
  "sa34dd": "Text"
}

  同时提供loader，用于自动转换vue模板/js文件中的文本, 对script/js模块注入$t函数。转化后的代码示例如下。

<template>
  <div>
    <Child :props="$t('asf45e')" />
    <div>{{ $t("1e24cf")}}</div>
    <div>{{ data }}</div>
  </div>
</template>   
<script>
import Vue from 'vue'
const _i18n_vue = new Vue();
const $t = _i18n_vue.$t.bind({$i18n: window.global_i18n})
export default {
   name: 'HelloWorld',
   components: {
      Child,
   },
   data() {
      return {
         data: $t('sa34dsd')
      }
   },
}
</script>

  js 文件同理，也要替换中文并注入$t函数。

5分钟快速上手

1. 安装

npm install ai-vue-i18n -D
# 根据项目选择
npm install vue-i18n@8  # Vue2
npm install vue-i18n@9  # Vue3

2. 配置

执行简单命令生成配置文件：

i18n-config

  完整配置参考这里

  执行命令i18n-config生成一个ai-vue-i18n.config.js配置文件，我列举了部分字段如下：

const path = require('path')

module.exports = {
  vueVersion: 'vue3', // vue的版本，支持vue3/vue2
  providerType: 'OPENAI',
  model: '',
  baseURL: 'http://localhost:11434',
  apiKey: '',
  temperature: 0.2,
  targetFiles: [path.resolve(process.cwd(), 'src')], // 需要翻译的文件
  excludeFiles: [], // 不需要翻译的文件
  outputDir: path.resolve(process.cwd(), 'src/locale'), // 翻译后的文件存放目录
  translateList: [
    {
      name: '英文',
      fileName: 'en'
    }
  ], 
}

  这个文件默认是CJS格式的，需要根据项目实际情况进行调整为ESM格式。

  配置好vue的版本，ai服务商、模型、baseURL、apiKey, 以及翻译列表等核心字段后就可以执行翻译命令了。

3. 一键翻译

i18n-translate

控制台会显示实时进度：

4. 创建i18n实例并集成到项目

4.1 创建i18n实例

  新建一个i18n.js文件，vue2代码示例如下：

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import en from './en'
import zh from './zh_cn'

const messages = {
  en,
  zh
}
Vue.use(VueI18n)
const i18n = new VueI18n({
  locale: 'zh', // 设置默认语言
  messages // 绑定语言包
})
window.global_i18n = i18n // 必须将i18n实例挂载到window上的global_i18n属性上，后续要注入到js文件的
export default i18n

  如果语言包非常大的话，也可以考虑使用动态加载语言包的方式，导出一个Promise。我这里用vue3举例：

import { createI18n } from 'vue-i18n'

const LANGUAGES_LOADER = {
  en: () => [import('./en.js')],
  'zh-cn': () => [import('./zh_cn.js')],
}

const language = 'zh-cn' // 默认语言，切换语言时动态修改这个值就好了
const i18nLangLoader = new Promise((resolve, reject) => {
  Promise.all(LANGUAGES_LOADER[language]()).then((modules) => {
    const i18n = createI18n({
      legacy: false,
      globalInjection: true,
      locale: language,
      messages: {
        [language]: modules[0].default,
      }
    })
    window.global_i18n = i18n
    resolve(i18n)
  }).catch((err) => {
    reject(err)
  })
})

export default i18nLangLoader

注意：创建实例后要执行window.global_i18n = i18n将实例挂在到window上的global_i18n属性上，后续要注入到script/js文件中

4.2 集成到main.js

  然后将vue-i18n实例集成到main.js中

// vue2
import i18n from './locale/i18n' // 一定要先导入i18n实例，让vue-i18n实例先创建并挂在到window上，后续js文件的$t函数才能正常使用
import Vue from "vue";
import App from "./App.vue";

new Vue({
  i18n,
  render: (h) => h(App),
}).$mount("#app");

  如果语言包是同步导入的话，只需要像上面一样把i18n实例文件放在最上面导入就可以了。这样后续的js文件中就可以使用$t函数了。

  如果是异步导入的话，就需要将js文件的导入及vue模块的导入放在i18n实例创建之后。只有这样，当项目读取js文件时，才能从window上取到i18n实例。

// vue3
import { createApp } from 'vue'
import i18nLangLoader from './locale/i18n.ts'


i18nLangLoader.then((i18n) => {
  import('./App.vue').then(async (App) => {
    const app = createApp(App.default)
    const router = await import('./router')
    app.use(i18n)
    app.use(router.default)
    app.mount('#app')
  })
})

5. 引入Loader执行代码转换

5.1 Vite配置

// vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { AIvueI18nPluginForVite } from "ai-vue-i18n";

export default defineConfig({
  plugins: [vue(), AIvueI18nPluginForVite()]
})

5.2 Webpack配置

// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule('vue-i18n')
      .test(/\.(vue|js)$/)
      .enforce('pre')  // 确保在其他loader之前执行
      .use('ai-vue-i18n')
      .loader('ai-vue-i18n')
      .end()
  }
}

  到这里所有的工作都完成了，你只需要在项目中尽情使用中文就好了。

6. pre-push 校验

  如果想保障项目翻译的统一性，可以执行i18n-add-pre-push命令。

  执行该命令后，会在项目的git pre-push钩子中添加i18n-check命令，每次push代码前会先检查是否有未翻译的中文，有的话将会阻止push代码。

注意：如果项目中使用了husky的话，就不需要执行i18n-add-pre-push命令。在package.json中配置husky的pre-push钩子即可。
  配置示例：

"husky": {
    "hooks": {
      "pre-push": "i18n-check"
    }
  }

总结

  AI-Vue-I18n的详细使用说明，请参考这里, 欢迎大家star。

赏

谢谢你请我吃糖果

支付宝

微信

• 本文作者： puppy
• 本文链接： https://ispuppy.github.io/2025/10/30/aiVueI18n/
• 版权声明： 本BLOG上原创文章未经本人许可，不得用于商业用途及传统媒体。网络媒体转载请注明出处，否则属于侵权行为。