Vue i18n 在 Vue3 + setup + TS 项目中的应用

版本选择

 "vue-i18n": "^9.3.0-beta.21"

vue-i18n在9.2版本中声明文件有问题, 引入时会报错; 在测试版本已经修复。

安装 :

 npm install vue-i18n@next

目录结构

language

locales文件夹中是语言包文件

中英文语言包中的key值要对应，i18n会根据当前语言类型动态加载语言包，根据key值去取对应的文本

index.ts 基础配置

 import { createI18n } from "vue-i18n";
 import zhCN from "./locales/zh-CN";
 import enUS from "./locales/en-US";
 
 const i18n = createI18n({
   legacy: false, // 使用 Composition API 模式，则需要将其设置为false
   locale: "zh", // 默认显示语言
   messages: {
     zh: zhCN,
     en: enUS,
   },
 });
 
 export default i18n;

hooks

useLocale.ts对常用方法进行封装, 方便复用

 import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 export default function useLocale() {
   const i18n = useI18n(); //实例化i18n
   const currentLocale = computed(() => {
     return i18n.locale.value; // 获取当前语言设置
   });
   // 切换语言
   const changeLocale = (value: string) => {
     i18n.locale.value = value; //赋值切换语言
   };
   const t = i18n.t; //这里的 t 就是vue2中的 $t
   return {
     i18n,
     currentLocale,
     changeLocale,
     t,
   };
 }

注册使用

在main.ts中全局挂载

 import { createApp } from "vue";
 import App from "./App.vue";
 
 import VueI18n from "./language";
 
 createApp(App).use(VueI18n).mount("#app");

App.vue

 import { ref, watch } from "vue";
 import useLocale from "@/hooks/useLocale";
 
 const language = ref(false);
 
 const { changeLocale, t } = useLocale();
 
 watch(language, (val) => {
   if (val) {
     changeLocale("en");
   } else {
     changeLocale("zh");
   }
 });

   <el-switch
     class="switch"
     v-model="language"
     size="large"
     :active-text="t('language.en')"
     :inactive-text="t('language.zh')"
   />

监听按钮状态, 变化时调用changeLocale方法改变语言
使用useLocale中的t方法选择展示的文字

props中也能正常使用:

<!-- 父组件  -->
<div class="wrapper">
  <HelloWorld :msg="t('hello.title')" />
</div>

<template>
  <div class="greetings">
    <h1 class="green">{{ msg }}</h1>
    <h3>
      {{ t("hello.description") }}
    </h3>
  </div>
</template>

<script setup lang="ts">
import useLocale from "@/hooks/useLocale";
defineProps<{
  msg: string;
}>();
const { t } = useLocale();
</script>

切换前: 切换后: