vue-i18n的基本使用

安装 vue-i18n 依赖

pnpm install vue-i18n --save

安装成功后package.json结果如下：

增加本地国际化配置文件

en_US.ts英文配置文件如下：

export default {
  test: {
    title: "test",
  },
};

zh_CN.ts中文简体配置文件如下：

export default {
  test: {
    title: "测试",
  },
};

创建自定义的i18n实例，index.ts文件如下：

import { createI18n } from "vue-i18n";
import zh_CN from "./lang/zh_CN";
import en_US from "./lang/en_US";

//系统语言（全局默认语言），取浏览器语言
export const language = navigator.language || "en_US"; // 获取浏览器的语言设置

//创建i18n实例
const i18n = createI18n({
  locale: localStorage.getItem("lang") || language, // 设置当前语言类型，若本地没存，则设置默认语言
  fallbackLocale: "zh_CN", //如果出错，则默认的语言：中文简体
  legacy: false, // 如果要支持compositionAPI，此项必须设置为false;
  globalInjection: true, // 全局注册$t方法
  messages: {
	  zh_CN: zh_CN,
	  en_US: en_US,
  },
  silentTranslationWarn: true, // 去掉警告
  missingWarn: false,
  silentFallbackWarn: true, //抑制警告
});

export default i18n;

注册自定义的i18n插件

在main.ts引入：

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import i18n from "@/i18n/index";

createApp(App).use(store).use(router).use(i18n).mount("#app");

使用i18n

<template>
  <div style="height: 800px">
    {{ $t("test.title") }}
  </div>
</template>

参考

1. What is Vue I18n? | Vue I18n (intlify.dev)