使用 VoerkaI18n 3.0 将前端国际化工作流（如何使用）安装 yarn安装初始化执行命令后会有多个选项：

工作流（如何使用）

安装

yarn安装

yarn global add @voerkai18n/cli

npm安装

npm install -g @voerkai18n/cli

初始化

voerkai18n init

执行命令后会有多个选项：

语言目录，默认src\languages
是否开发库工程：no
选择支持的语言：空格选择，回车确认
默认语言
激活语言
启用TypeScript 全部配置完成后，配置React/Vue框架集成

集成

voerkai18n apply

这里如果执行报错，需要手动配置。

Vue3的手动配置

安装依赖包

需要安装多个依赖包，@voerkai18n/runtime，@voerkai18n/vue，@voerkai18n/plugins，@voerkai18n/formatters

yarn add -D @voerkai18n/formatters @voerkai18n/plugins @voerkai18n/vue @voerkai18n/runtime

npm install --save-D @voerkai18n/formatters @voerkai18n/plugins @voerkai18n/vue @voerkai18n/runtime

配置文件

详见官网

包裹要翻译的文本

自动包裹

voerkai18n wrap

我实际使用中发现效果不太好，可能跟提示词+AI能力有关，无赖只能手动包裹标识。

手工包裹标识

script中

import { $t, t, i18nScope } from '@/languages'
const title = $t('需要自动随语言变更的文本')
const msg = t('使用时按照当前语言获取对应文本的')

注意$t得到的是一个ref，t得到的是一个文本

template中

<el-checkbox>
  <Translate message="我是要随语言切换的纯文本" />
</el-checkbox>
<el-form-item :label="t('我也是')">
</el-form-item>

所有用 $t, t, Translate中message部分就是包裹起来要进行翻译的文本。注意：Translate中vars部分代表的是参数，不会被当作要翻译的文本。

提取要翻译的文本

提取的对象就是上个步骤中所有包裹起来的文本。

voerkai18n extract

执行完成后会将上一个步骤标记的翻译文本提取到src\languages\translates目录下，按照词条和段落区分messages和paragrophs两个目录。

翻译

需要在src\languages\api.json中配置百度翻译API的id和key，或者其他大模型的key、url、model。调用百度翻译API

voerkai18n translate --api baidu --provider baidu

调用其他模型，如qwen，这里是自定义配置在api.json中的大模型地址，支持OpenAI模式。

voerkai18n translate --api qwen

编译语言包

将前面提取的词条和翻译后的语言编译到src\languages\messages和src\languages\paragraphs目录里。

voerkai18n compile

代码开发

启用插件

...
import { i18nScope } from '@/languages'
import { i18nPlugin } from '@voerkai18n/vue'

i18nScope.ready(()=> {
  const app = createApp(App)
  app.use(i18nPlugin, { i18nScope })
  app.mount('#app')
})

i18nScope.ready事件可以解决当前激活语言不是默认语言时，启动程序会出现显示的是默认语言的问题，因为激活语言是异步加载的，这里通过i18nScope.ready来等待加载完成。

配置插件

修改vite.config.ts文件

import i18nPlugin from '@voerkai18n/plugins/vite'

module.exports = {
    configureWebpack: {
      plugins: [
        vue(),
        i18nPlugin()
      ] 
    }
  }

官方文档注意：Electron程序如果main中有使用翻译，也需要加。

ElementPlus全局配置

通过监听activeLanguage设置对应语言的locale值。

<template>
  <el-config-provider :locale="locale">
  </el-config-provider>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'
import { i18nScope } from '@/languages'
import { useVoerkaI18n } from '@voerkai18n/vue'

const { activeLanguage } = useVoerkaI18n(i18nScope)
const locale = computed(() => (activeLanguage.value === 'zh-CN' ? zhCn : en))
</script>

切换语言

import { $t, t, i18nScope } from '~@/languages'
import { useVoerkaI18n } from '@voerkai18n/vue'

const { activeLanguage } = useVoerkaI18n(i18nScope)
const handleChangeLanguage = () => {
  if (activeLanguage.value === 'zh-CN') {
    i18nScope.change('en-US')
  } else {
    i18nScope.change('zh-CN')
  }
}

通过调用handleChangeLanguage切换语言，如果多个语言修改该方法的内部逻辑即可。

运行

到这里可以开始运行了，如果没有提取、翻译、编译过语言，需要在标识了

问题&解决

问题1

问题：

问题2

问题：当切换的语言不是默认语言时，下次打开页面无法正确加载切换的语言。解决：

方案1：将 \src\languages\index.ts 文件中 messages 的语言导入方式改成非异步的。
方案2：见官方文档

问题3

如何在DOM中使用过滤器并支持语言切换

<Translate message="{|toUpperCase}" :vars="welcome" />

import { $t, t, Translate } from '~@/languages'
const welcome = $t('欢迎使用')

访问VoerkaI18n官网