i18n

Vue 多语言解决方案 vue-i18n
VScode 多语言插件 i18n Ally
可视化操作参考文档

i18n Ally 优点

可以直观的看到真实文案，在组件内即可直接看到，无需取对应语言文件内查看原文！
可以智能检测并定位语言文件内未找到的 key，避免漏翻译
可以直接在 VS Code 工具中翻译对应的语言，而无需单独去翻译网站搜索，并且会自动生成 key 名，无需自己起名，并且不仅可以单独翻译词语，还可以翻译整个文件批量翻译、文件夹批量翻译

关于 i18n Ally 可视化操作可以查看参考文档

使用 vue-i18n

pnpm + vue3 + typescript

安装 vue-i18n

bash

pnpm add vue-i18n

多语言文件

多语言文件建议使用json格式

- src
    - locales
        - en.ts // 可以是json，也可以是ts，如果是ts的话，需要增加额外配置
        - zh.ts // 可以是json，也可以是ts，如果是ts的话，需要增加额外配置
        - index.ts // 或者 js 主要是暴露入口在 main 入口文件中引入注册

index.ts 写法

import en from "./en";
import zh from "./zh";
import { createI18n } from "vue-i18n";

export default createI18n({
  locale: "zh", // 要本地化的 Vue 应用程序的语言
  fallbackLocale: "zh", // 语言中找不到翻译 API 中指定的密钥资源时要回退到的语言
  messages: {
    en,
    zh,
  },
});

main.ts 写法

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
// 重要
import I18n from "@/locales";
const app = createApp(App);
app.use(I18n);
app.mount("#app");

en.ts / zh.ts 写法

如果是 json 写法的话，去掉 export default 即可

export default {
  common: {
    confirm: "确认",
  },
};

页面使用

template 区域

vue

<template>
  <div>
    {{ $t("common.confirm") }}
  </div>
</template>

script 区域

//

i18n Ally VSCode 配置

基础配置

操作 vscode 工作区 .vscode/settings.json

json

{
  "i18n-ally.localesPaths": [
    "src/locales" // I18n所有语言 所在目录
  ],
  "i18n-ally.enabledParsers": ["ts", "json"] // 解析的文件后缀
}

默认语言版本配置

文件$t('xxx.xxx')语法自动转换显示，默认显示en文件，修改默认显示中文zh文件

操作工作区配置.vscode/settings.json

新增如下配置

json

// 设置当前显示的主体语言: zh-CN/en/zh-TW/...
"i18n-ally.displayLanguage": "zh-CN",

属性名生成规则配置

操作工作区设置.vscode->settings.json

json

// 翻译文案的属性名称策略：slug-拼音、random-随机、empty-需要手动命名
"i18n-ally.extract.keygenStrategy": "slug",
// 属性名称的具体生成规则 驼峰
"i18n-ally.extract.keygenStyle": "camelCase",

可选配置值如下

default/kebab-case: 拼音+短横杠，如 js-pao。 snake_case: 拼音+下划线，如 js_pao。 camelCase: 拼音+驼峰，如 jsPao PascalCase: 拼音+驼峰+首字符大写，如 JsPao。 ALL_CAPS: 拼音+下划线+全大写，如 JS_PAO。

命名空间 (按模块划分)

操作工作区配置文件 .vscode->settings.json

方法一: 嵌套格式或扁平键格式

json

"i18n-ally.keystyle": "nested" // 嵌套格式，flat 为 扁平化翻译键 (扁平键格式/点分表示法)

嵌套格式 nested

json

{
  "common": {
    "confirm": "确认"
  }
}

扁平化翻译键 (扁平键格式/点分表示法) flat

json

{
  "common.confirm": "确认"
}

方法二：模块化语言包

json

// 使用空间命名
"i18n-ally.namespace": true,
"i18n-ally.pathMatcher": "{locale}/{namespace}.json",

语言结构如下

- src
    - locales
        - en
            - common.json
            - index.ts
        - zh
            - common.json
            - index.ts
        - index.ts

en / zh index.ts 写法

json 依然保持 嵌套格式 或者 扁平化翻译键

import common from "./common.json";
import user from "./user.json";
export default {
  common,
  user,
};

完整的工作区配置

json

{
  // 设置当前显示的主体语言: zh-CN/en/zh-TW/...
  "i18n-ally.displayLanguage": "zh-CN",
  // 插件将以何种语言作为基准来进行翻译相关的操作，如果你正在开发一个多语言应用，并且原始文案是用英语编写的，你可以将`sourceLanguage`设置为`en`（代表英语）。这样，插件就知道在提取文案进行翻译或者在代码中关联不同语言的文案时，以英语文案为原始参考。
  "i18n-ally.sourceLanguage": "zh-CN",
  "i18n-ally.localesPaths": [
    // 翻译文件夹路径 (相对于项目根目录)，你也可以使用Glob匹配模式。
    "src/locales"
  ],
  "i18n-ally.translate.engines": ["baidu"], // 指定翻译器
  "i18n-ally.translate.baidu.appid": "你的appid", // 翻译器api-appid
  "i18n-ally.translate.baidu.apiSecret": "你的appSecret", // 翻译器api-Secret
  "i18n-ally.enabledParsers": [
    // 指定启用文件格式
    "json",
    "yaml"
  ],
  "i18n-ally.keystyle": "nested", // 翻译路径格式 (翻译后变量格式 nested：嵌套式  flat:扁平式)
  // ...
  // 翻译文案的属性名称策略：slug-拼音、random-随机、empty-需要手动命名
  "i18n-ally.extract.keygenStrategy": "slug",
  // 属性名称的具体生成规则 驼峰
  "i18n-ally.extract.keygenStyle": "camelCase",
  "i18n-ally.enabledFrameworks": ["vue"],
  // 使用空间命名
  "i18n-ally.namespace": true,
  "i18n-ally.pathMatcher": "{locale}/{namespace}.json"
}

各地区语言命名参考

英文 : en
美国 : en_US
中国 : zh_CN
台湾 : zh_TW
香港 : zh_HK
日本 : ja_JP
秘鲁 : es_PE
巴拿马 : es_PA
波斯尼亚和黑山共和国 : sr_BA
危地马拉 : es_GT
阿拉伯联合酋长国 : ar_AE
挪威 : no_NO
阿尔巴尼亚 : sq_AL
伊拉克 : ar_IQ
也门 : ar_YE
葡萄牙 : pt_PT
塞浦路斯 : el_CY
卡塔尔 : ar_QA
马其顿王国 : mk_MK
瑞士 : de_CH
芬兰 : fi_FI
马耳他 : en_MT
斯洛文尼亚 : sl_SI
斯洛伐克 : sk_SK
土耳其 : tr_TR
沙特阿拉伯 : ar_SA
英国 : en_GB
塞尔维亚及黑山 : sr_CS
新西兰 : en_NZ
挪威 : no_NO
立陶宛 : lt_LT
尼加拉瓜 : es_NI
爱尔兰 : ga_IE
比利时 : fr_BE
西班牙 : es_ES
黎巴嫩 : ar_LB
加拿大 : fr_CA
爱沙尼亚 : et_EE
科威特 : ar_KW
塞尔维亚 : sr_RS
美国 : es_US
墨西哥 : es_MX
苏丹 : ar_SD
印度尼西亚 : in_ID
乌拉圭 : es_UY
拉脱维亚 : lv_LV
巴西 : pt_BR
叙利亚 : ar_SY
多米尼加共和国 : es_DO
瑞士 : fr_CH
印度 : hi_IN
委内瑞拉 : es_VE
巴林 : ar_BH
菲律宾 : en_PH
突尼斯 : ar_TN
奥地利 : de_AT
荷兰 : nl_NL
厄瓜多尔 : es_EC
台湾地区 : zh_TW
约旦 : ar_JO
冰岛 : is_IS
哥伦比亚 : es_CO
哥斯达黎加 : es_CR
智利 : es_CL
埃及 : ar_EG
南非 : en_ZA
泰国 : th_TH
希腊 : el_GR
意大利 : it_IT
匈牙利 : hu_HU
爱尔兰 : en_IE
乌克兰 : uk_UA
波兰 : pl_PL
卢森堡 : fr_LU
比利时 : nl_BE
印度 : en_IN
西班牙 : ca_ES
摩洛哥 : ar_MA
玻利维亚 : es_BO
澳大利亚 : en_AU
新加坡 : zh_SG
萨尔瓦多 : es_SV
俄罗斯 : ru_RU
韩国 : ko_KR
阿尔及利亚 : ar_DZ
越南 : vi_VN
黑山 : sr_ME
利比亚 : ar_LY
白俄罗斯 : be_BY
以色列 : iw_IL
保加利亚 : bg_BG
马耳他 : mt_MT
巴拉圭 : es_PY
法国 : fr_FR
捷克共和国 : cs_CZ
瑞士 : it_CH
罗马尼亚 : ro_RO
波多黎哥 : es_PR
加拿大 : en_CA
德国 : de_DE
卢森堡 : de_LU
阿根廷 : es_AR
马来西亚 : ms_MY
克罗地亚 : hr_HR
新加坡 : en_SG
阿曼 : ar_OM
泰国 : th_TH
瑞典 : sv_SE
丹麦 : da_DK
洪都拉斯 : es_HN

i18n ​

i18n Ally 优点 ​

使用 vue-i18n ​

安装 vue-i18n ​

多语言文件 ​

index.ts 写法 ​

main.ts 写法 ​

en.ts / zh.ts 写法 ​

页面使用 ​

template 区域 ​

script 区域 ​

i18n Ally VSCode 配置 ​

基础配置 ​

默认语言版本配置 ​

属性名生成规则配置 ​

命名空间 (按模块划分) ​

方法一: 嵌套格式或扁平键格式 ​

方法二：模块化语言包 ​

完整的工作区配置 ​

各地区语言命名参考 ​

i18n

i18n Ally 优点

使用 vue-i18n

安装 vue-i18n

多语言文件

index.ts 写法

main.ts 写法

en.ts / zh.ts 写法

页面使用

template 区域

script 区域

i18n Ally VSCode 配置

基础配置

默认语言版本配置

属性名生成规则配置

命名空间 (按模块划分)

方法一: 嵌套格式或扁平键格式

方法二：模块化语言包

完整的工作区配置

各地区语言命名参考