vue3 i18n + i18n ally扩展 配置及其使用

项目技术栈 vue3 + vant + ts + i18n

下载i18n 以及 i18n ally扩展

 npm install vue-i18n@next

扩展里搜索ally并下载

项目目录下 .vscode/setting.json 配置ally

{
  "i18n-ally.localesPaths": ["src/locales/lang"], // 语言包地址
  "i18n-ally.keystyle": "nested",
  "i18n-ally.sortKeys": true,
  "i18n-ally.namespace": true,
  "i18n-ally.pathMatcher": "{locale}/pages/{namespaces}.{ext}",  // 即 en_US/pages/xxx.json
  "i18n-ally.enabledParsers": ["json"],  // 语言包文件类型
  "i18n-ally.sourceLanguage": "zh_CN",
  "i18n-ally.displayLanguage": "zh_CN",
  "i18n-ally.enabledFrameworks": ["vue"]
}

文件目录

！！！注意：若语言包文件类型为ts、js则为只读、无法使用ally对其编辑

设置多个文件如 setting.json, user.json 对应不同的业务

locales
│  index.ts
│
└─lang
    ├─en_US
    │  │  index.ts
    │  │
    │  └─pages
    │          setting.json
    │          user.json
    │
    └─zh_CN
        │  index.ts
        │
        └─pages
                setting.json
                user.json

项目配置

zh_CN的index.ts

import setting from "./pages/setting.json";
import user from "./pages/user.json";

export default {
  lang: "简体中文",
  setting,
  user
};

locales/index.ts

// vue-i18n所需要引入的
import { createI18n } from "vue-i18n";
// 本地的文件夹
import enLocale from "./lang/en_US";
import zhLocale from "./lang/zh_CN";
// import zhhkLocale from "./zh_hk";
// vant所需要引入的
import { Locale } from "vant";
//vant中的文件夹  需要的语言和本地的语言保持一致
import enUS from "vant/lib/locale/lang/en-US";
import zhCN from "vant/lib/locale/lang/zh-CN";

const messages = {
  en_US: {
    ...enUS,
    ...enLocale
  },
  zh_CN: {
    ...zhCN,
    ...zhLocale
  }
};

// 更新vant组件库本身的语言变化，支持国际化
function vantLocales(lang: string) {
  if (lang === "en_US") {
    Locale.use(lang, enUS);
  } else if (lang === "zh_CN") {
    Locale.use(lang, zhCN);
  }
}

// 获取浏览器的语言
const browserLang = navigator.language.replace("-", "_") || "zh_CN";
const language = localStorage.getItem("language") || browserLang || "zh_CN";
localStorage.setItem("language", language);

// vue i18n
const i18n = createI18n({
  legacy: false,
  // 全局注册 $t方法
  globalInjection: true,
  //设置初始化语言
  locale: language,
  // 设置备用语言
  fallbackLocale: "zh_CN",
  messages
});

const langCode = Object.keys(messages);

// 更改语言
function changeLanguage(lang: string) {
  // 如果参数不为 "en_US" 或 "zh_CN"，自动切换为 "zh_CN"
  if (!langCode.includes(lang)) {
    lang = "zh_CN";
  }
  vantLocales(lang);
  i18n.global.locale.value = lang as "en_US" | "zh_CN";
  localStorage.setItem("language", lang);
}

export { i18n, vantLocales, changeLanguage };

注意在main.ts 中也要引入

import { createApp } from "vue";
import { createPinia } from "pinia";
import "./styles/style.css";
import "./assets/tailwind.css";
import router from "./router";
import App from "./App.vue";
// i18n
import { i18n, vantLocales } from "./locales";
// svg icon
import "virtual:svg-icons-register";

vantLocales(i18n.global.locale.value);
const app = createApp(App);
app.use(i18n);
app.use(createPinia());
app.use(router);
app.mount("#app");

配置翻译服务

这里选择deepL

设置Engines为deepl 并填入对应的key

使用

在左侧 点击 ally即可看到当前代码文件对应的key

这里的例子中

setting.json

{
  "top": "设置",
  "security": "账户安全",
  "password": "修改密码",
  "email": "邮箱绑定",
  "setting": "通用设置",
  "language": "语言设置",
  "logout": "退出登录"
}

代码文件中使用

{{ $t("setting.language") }}