全局封装vue-i18n组件以及几个的问题解决

1、Vue-i18n是什么？

答：Vue I18n是一个用于Vue.js的国际化插件，它使您可以轻松地在Vue应用程序中实现国际化和本地化。该插件提供了一种简单的方式来管理和加载不同语言的翻译文本，并在Vue组件中使用它们。Vue-I18n支持基于组件的翻译、动态翻译、复数形式、日期和数字格式化等功能。通过Vue-I18n，您可以为您的应用程序提供多语言支持，使其可以适应不同的用户群体和市场。

2、安装vue-i18n

首先, 我们需要安装一下vue-i18n插件 (如果你有vite+vue3项目）： pnpm install --save vue-i18n

3、基本配置

（1）在"./src"文件夹下创建两个文件夹分别是"locale"和"lang","locale"文件夹下的index.js用于存放其他与语言相关的辅助文件或配置。"lang"文件夹存放各种语言的翻译文件

（2）在lang文件夹下的文件, 需要我们将各种语言配置好, 我截取一下大概配置（3）现在, 我们写index.js部分在这个文件中, 我们主要做了什么呢?其实在这里面, 我们主要是配置了国际化, 并将配置好的进行了导出. 第一步, 我们需要将createI18n进行导入 import { createI18n } from "vue-i18n";

导入之后, 我们还需要将我们lang文件中的文件进行导入

js 复制代码

import zhCN from "./lang/zh-CN"; // 中文
import enUS from "./lang/en-US"; // 英文

（4）导入完成之后, 我们创建一个变量, 用于优先设置哪国语言
const defaultLocale = localStorage.getItem("locale") || "zh-CN";

（5）剩下的就是创建国际化i18n并导出了

js 复制代码

const i18n = createI18n({
  locale: defaultLocale,
  legacy: false,
  messages: {
    "zh-CN": zhCN,
    "en-US": enUS,
  },
});
export default i18n;

（6）我们先将该文件在main.js中进行导入并挂载app应用实例身上

js 复制代码

import i18n from "@/locale";
app.use(i18n);

（补充）： 首先在vite.config.js文件里设置：（方便在src文件夹下查找所需的文件）

js 复制代码

export default defineConfig(() => {
          ....
           resolve: {
             alias: {
        // 设置路径
        "~": path.resolve(__dirname, "./"),
        // 设置别名
        "@": path.resolve(__dirname, "./src"),
      },
      extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
    },
          
}

（7）然后我们还需要在lang/index.js中导出一个数组, 用于我们后面的下拉选择

js 复制代码

export const LOCALE_OPTIONS = [
  { label: "中文", value: "zh-CN" },
  { label: "English", value: "en-US" },
];

4、全局封装切换语言组件

（1）在src/components文件夹下创建"LangSelect"文件夹和index.vue

（2）我们在"LangSelect"文件夹下的index.vue组件上进行导入
import { LOCALE_OPTIONS } from '@/locale/index'

（3）并使用element-plus的下拉框组件, 并绑定一个change事件**

js 复制代码

import { useI18n } from 'vue-i18n'
import { LOCALE_OPTIONS } from '@/locale/index'
const { locale } = useI18n()

//用来切换语言
function handleLanguageChange(lang) {
//往本地存储
    localStorage.setItem('locale', lang)
    locale.value = lang
    isChangeLang.value = !isChangeLang.value;
}

这样, 切换语言的下拉框就写完了：

（4）在语言选择时，我们会将其备份到本地，这样刷新时就能保留，而我们则会优先从本地获取，避免遗失：

使用的时候, 我们只需要使用t包裹即可（$t是i18n注入的一个函数，直接在模板中使用即可，ts脚本中需要使用useI18n获取到t(语言转换函数)，或者通过i18n实例下的global属性获取t函数。）

（5）$t的不同用法：

i18n.global.t("XXXX")是一个函数调用，使用了 i18n 对象的 global 属性来获取文本的本地化版本，方便在某函数方法或JS文件里调用，比如：

（6）全局监听切换语言的设置：

在store/index.js下设置：

js 复制代码

// 导入 Element Plus 中英文语言包
import zhCn from "element-plus/es/locale/lang/zh-cn";
import en from "element-plus/es/locale/lang/en";

const useAppStore = defineStore("app", {
computed: () => ({
    /**
     * 根据语言标识读取对应的语言包
     */
    locale: computed(() => {
      if (useAppStore().language === "en") {
        return en;
      } else {
        return zhCn;
      }
    }),
  }),
});

（7）几个问题的需要解决的方案：

7.1 比如在router.js里设置i18n.global.t本地化，但每次切换时不及时更新切换别的语言。

解决办法：在LangSelect/index.vue文件下导入useRouter，并设置router.go()在切换语言的handleLanguageChange函数方法里

js 复制代码

import { useRouter } from 'vue-router'
const router = useRouter()
function handleLanguageChange(lang) {
    localStorage.setItem('locale', lang)
    locale.value = lang
    isChangeLang.value = !isChangeLang.value;
    router.go()
}

7.2 页面挂载Element Plus组件的切换语言Select选择器来检查当前语言并正确配置
:placeholder="isChangeLang ? 'please enter change language' : '请切换语言'"

js 复制代码

const isChangeLang = ref(false)
// 当组件挂载时，检查当前语言
onMounted(() => {
    if (locale.value === 'en-US') {
        isChangeLang.value = true
    }
})

7.3 切换语言的其他方法：

举例子：首先定义了两个变量nihaoZh和nihaoEn，分别存储了中文和英文版本的问候语。然后，通过首先配置好的locale.value === 'en-US'这个条件判断环境来决定使用哪个版本的问候语。最后，使用ElMessageBox.confirm()方法来显示警告消息框。用途：这个例子展示了如何在Vue.js组件中根据用户的语言设置显示不同的问候语。这种做法可以有效地处理多语言用户体验。

这是我作为前端菜鸟写的第一篇技术文章，如果有地方写得不够好或者不够完整，欢迎大家多多指教哦！