我使用的是vue2.6版本，具体使用其他版本可以进行修改

一、安装

npm install vue-i18n -D

二、配置

1、文件配置

①在src下创建 i18n 目录

②在 i18n 目录下创建 langs 文件夹 和 index.js文件，具体如下

2、index.js代码如下，这里使用了较多语言，具体按项目定

import Vue from "vue";
import VueI18n from "vue-i18n";
//引入自定义语言配置
import de from "./langs/de";
import en from "./langs/en";
import es from "./langs/es";
import fr from "./langs/fr";
import jp from "./langs/jp";
import ko from "./langs/ko";
import th from "./langs/th";
import tw from "./langs/tw";
import vi from "./langs/vi";
import zh from "./langs/zh";
Vue.use(VueI18n); // 全局注册国际化包
// 准备翻译的语言环境信息
const i18n = new VueI18n({
  locale: localStorage.getItem("lang") || "zh", //将语言标识存入localStorage或sessionStorage中，首次默认中文显示，非首次则以localStorage为准
  messages: {
    de,
    en,
    es,
    fr,
    jp,
    ko,
    th,
    tw,
    vi,
    zh
  },
  silentTranslationWarn: true, //解决vue-i18n黄色警告"value of key 'xxx' is not a string"和"cannot translate the value of keypath 'xxx'.use the value of keypath as default",可忽略
  globalInjection: true, // 全局注入
  fallbackLocale: "zh", // 指定的locale没有找到对应的资源或当前语种不存在时，默认设置当前语种为中文
});
const temLang = localStorage.getItem("lang");
if (!temLang) {
  localStorage.setItem('lang', 'zh')
}
export default i18n;

3、zh.js文件实例，其他语言文件按这格式不变

// 中文
export default {
    loginTitle: "账号登入",
    registerTitle: "账号注册",
    loginTip: "欢迎回来！使用您的电子邮箱或手机号登入",
    registerTip: "使用您的电子邮箱或手机号进行注册",
    userNamePlc: "请输入账号",
    userPassPlc: "请输入密码",
    login: "登入",
    register: "注册",
    overtime: "登录超时，请重新登录",
    loginSuccess: "登入成功",
    registerSuccess: "注册成功",
    userNameTip: "请输入账号",
    userPassTip: "请输入密码",
    userOldPassTip: "请输入旧密码",
    userNewPassTip: "请输入新密码",
    userPassAgainTip: "请再次输入新密码",
    errorPassTip: "两次密码不一致",
    userPassSureTip: "请再次输入密码",
    jumpPageText: "当前页面需要登录查看，请登录",
};

4、为了方便使用，添加了个hooks文件，可以在vue页面引用此文件获取当前语言

// 语言配置
import { ref, computed, getCurrentInstance } from "vue";

export function useLang() {
  const vm = getCurrentInstance();
  const lang = ref(localStorage.getItem("lang") || "zh");
  const langList = ref([
    {
      label: "English",
      src: require("../assets/images/lang/en.png"),
      value: "en",
    },
    {
      label: "简体中文",
      src: require("../assets/images/lang/zh.png"),
      value: "zh",
    },
    {
      label: "繁體中文",
      src: require("../assets/images/lang/tw.png"),
      value: "tw",
    },
    {
      label: "ไทย",
      src: require("../assets/images/lang/th.png"),
      value: "th",
    },
    {
      label: "日本語",
      src: require("../assets/images/lang/jp.png"),
      value: "jp",
    },
    {
      label: "Español",
      src: require("../assets/images/lang/es.png"),
      value: "es",
    },
    {
      label: "Français",
      src: require("../assets/images/lang/fr.png"),
      value: "fr",
    },
    {
      label: "Deutsch",
      src: require("../assets/images/lang/de.png"),
      value: "de",
    },
    {
      label: "한국어",
      src: require("../assets/images/lang/ko.svg"),
      value: "ko",
    },
    {
      label: "Tiếng Việt",
      src: require("../assets/images/lang/vi.svg"),
      value: "vi",
    },
  ]);
  // 获取当前语言对象
  const getLangObject = computed(() => {
    return langList.value.find((item) => item.value === lang.value);
  });
  // 设置语言
  const setLan = (val) => {
    localStorage.setItem("lang", val);
    lang.value = val;
    vm.proxy.$i18n.locale = val; //切换为英文
    // location.reload();
  };
  return { lang, setLan, langList, getLangObject };
}

 5、main.js配置

import Vue from "vue";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import App from "./App.vue";
import router from "./router";
import store from "@/store/index";
import i18n from "./i18n";
import "./permission";
Vue.use(ElementUI);
Vue.use({
  i18n: (key, value) => i18n.t(key, value),
});
Vue.config.productionTip = false;
new Vue({
  router,
  store,
  i18n,
  render: (h) => h(App),
}).$mount("#app");

三、使用

1、template模板使用

<template>
    {{ $t("loginTitle") }}
</template>

2、setup中使用，这里使用的vue2.6，和其他会有些差别

import { getCurrentInstance } from "vue";
const vm = getCurrentInstance();

console.log(vm.proxy.$t("loginTitle"))

 3、js文件中使用

import i18n from "./i18n";

i18n.t('loginTitle')