Vue3 使用

注意

请先安装核心依赖并配置好构建插件，

一、初始化插件

安装

插件主要为提供翻译工具函数，类型vue-i18n中的$t函数，安装后，在项目代码中即可使用$t函数进行翻译。

npm install @tc-i18n/vue3 -D

初始化

import { createApp } from 'vue';
import tci18nVue from '@tc-i18n/vue3';

const app = createApp();
app.use(tci18nVue, options);

查看options参数

执行命令

二、初始化配置文件

init 命令用于生成配置文件，执行一次即可。

npx tci18n init

选择 Vue3

执行完后，会在项目根目录下生成 tci18n.config.json 文件。

TIP

需要按照自己的实际需求修改 tci18n.config.json 配置文件，可以按照文件, 组件, 函数, 属性等维度, 自行决定哪些需要国际化，哪些不需要。
查看 tci18n.config.json 配置

三、提取语料

transform 命令用于提取语料，如果后续需要更新语料，重复执行此步骤即可。

npx tci18n transform

执行完成后，会将提取出来的语料数据存放在项目根目录下的 locale/langs.json 文件中。

{
    "zh-cn": {
        "你好": "你好",
        ...
    }
}

语料翻译

注意：transform 提取出来的语料只是未翻译的语料，如果要实现真正翻译，需要自己接入翻译工具对其进行翻译，然后放在 locale/langs.json 文件中， 比如：

{
    "zh-cn": {
        "你好": "你好",
        ...
    },
    "en-us": {
        "你好": "Hello",
        ...
    }
}

四、常见问题

如何切换语种

三方组件库国际化