1、安装

npm install vue-i18n@next --save
或者
yarn add vue-i18n@next --save

 2、配置

•    新建目录及文件夹

- src

    - locales

        - lang

            - zh.js   //   中文，

            - en.js   //   英语，

            - ar.js    //   法语，

            - jp.js    //   日语，

            - fr.js     //   阿拉伯语

        - index.js

• lang/zh.js 

const zh = {
    test: "測試",
    Credits: "積分"
}
export default zh; 

•  lang/en.js

 const en = {
    test: "test",
    Credits: "Credits"
}
export default en;

      其他几种语言仿照即可 

------------------------------------------ 

• lang/index.js

import { createI18n } from "vue-i18n";     // 引入vue-i18n组件
import zh from "./lang/zh";     // 引入zh.js 模块
import en from "./lang/en";     // 引入en.js 模块
import jp from "./lang/jp";     // 引入日语模块
import ar from "./lang/ar";     // 引入阿拉伯语 模块
import fr from "./lang/fr";     // 引入法语模块
 
 
export const getCurrLang = () => {
    // const localLang = navigator.language.split('-')[0]; // 浏览器语言
    const localStorageLang = localStorage.getItem("localeKey");// 本地存储语言
    return localStorageLang || 'en';
}
 
//注册i18n实例并引入语言文件
const i18n = createI18n({
    legacy: false,
    locale: 'en', // 语言标识
    fallbackLocale: "en", //没有英文的时候默认中文语言
    messages: {
        zh,
        en,
        jp,
        ar,
        fr
    },
});
export default i18n;
 
 

• src/main.js 引入i18n 

import { createApp } from 'vue'
import App from './App.vue'
import i18n from "./locales/i18n";
 
const app = createApp(App)
app.use(i18n).mount('#app');

3、安装及配置路由

npm install vue-router --save
或者
yarn add vue-router --save

• 配置路由 

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '@/views/HomeView.vue'
 
const routes = [
  {
    path: '/',
    redirect: `/homeView`
  },
  {
    path: '/:locale?/homeView',
    name: 'HomeView',
    component: HomeView,
    meta: {
      title: 'HomeView'
    }
  }
]
 
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
 
export default router

•   在main.js 引入router

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
 
const app = createApp(App)
app.use(router).mount('#app')

• 在App.vue 设置路由守卫 

<template>
  <div>
    <router-view />
  </div>
</template>
 
<script>
import { defineComponent } from "vue";
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";
 
export default defineComponent({
  setup() {
    // 路由守卫
    const router = useRouter();
    const i18n = useI18n();
    router.beforeEach((to, from, next) => {
      // 检查to.params.locale 是否存在，并设置相应的语言环境或执行其他逻辑
      const lang = to.params.locale;
      localStorage.setItem("localeKey", lang || "en");
      i18n.locale.value = lang || "en";
      // 放这才能根据语言设title标签内容
      document.title =
        to.meta.title || "home";
      next(); // 确保要调用next方法
    });
  },
});
</script>
 

 4、切换语言下拉框及逻辑

<template>
  <div style="display: flex;">
    <div style="margin: 25px;">{{ credits }}</div>
    <div class="item lang">
      <a-dropdown :trigger="['click']" v-model:visible="visible" placement="top">
        <a class="ant-dropdown-link" @click.prevent>
          <span class="text">{{ currentLang }}</span>
          <DownOutlined class="icon" v-show="visible" />
          <UpOutlined class="icon" v-show="!visible" />
        </a>
        <template #overlay>
          <a-menu @click="onClickMenu">
            <a-menu-item v-for="item in localArr" :key="item.key"> {{ item.name }} </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
  </div>
</template>
<script>
import { computed, defineComponent, ref, getCurrentInstance, watch } from "vue";
import { DownOutlined, UpOutlined } from "@ant-design/icons-vue";
import { useI18n } from "vue-i18n";
import i18nLanguage from "@/locales/i18n";
import { useRouter } from "vue-router";
export default defineComponent({
  components: {
    DownOutlined,
    UpOutlined,
  },
  props: {},
  setup() {
    // 定义key对应的语言
    const localArr = [
      { key: "zh", name: "中文" },
      { key: "en", name: "English" },
      { key: "jp", name: "日本です" },
      { key: "ar", name: "العربية" },
      { key: "fr", name: "français" },
    ]
 
    const getCurrentLang = (lang) => {
      return localArr.find(item => item.key == lang).name || "English"
    }
 
    // 在js中使用多语言，第一种
    // const credits = computed(() => {
    //   return i18nLanguage.global.t("Credits")
    // })
 
    //第二种：也可以通过组件实例，getCurrentInstance 只能在 setup 或生命周期钩子中使用
    const _this = getCurrentInstance().appContext.config.globalProperties;
    const credits = computed(() => _this.$t("Credits"))
 
    const visible = ref(false);
    const i18n = useI18n();
    const router = useRouter();
 
    let currentLang = ref(getCurrentLang(localStorage.getItem("localeKey") || "en"));
    watch(() => i18n.locale.value, (val) => {
      currentLang.value = getCurrentLang(val)
    }, {
      immediate: true
    })
    const onClickMenu = (e) => {
      i18n.locale.value = e.key;
      // 存入缓存
      localStorage.setItem("localeKey", e.key);
      // 设置页面显示的语言
      currentLang.value = getCurrentLang(e.key);
      // 下拉框收起
      visible.value = false;
      // 改变路由路径
      if (e.key !== "en") {
        router.push({ params: { locale: i18n.locale.value } });
      } else {
        router.push({ params: { locale: "" } });
      }
    };
    return {
      localArr,
      visible,
      onClickMenu,
      currentLang,
      credits
    };
  },
});
</script>