前端国际化

import { createI18n } from 'vue-i18n'
// 引入同级目录下文件
const modules = import.meta.globEager('./*')

//假设你还有其他目录下的语言文件 它的路径是 src/views/home/locales/en-US.ts
//那么你就可以 使用 :lower:（小写） :upper:（大写） 来引入文件
// const viewModules = import.meta.globEager('../views/**/locales/[[:lower:]][[:lower:]]-[[:upper:]][[:upper:]].ts')
function getLangAll()  {
  let message = {}
  getLangFiles(modules, message)
  //   getLangFiles(viewModules,message)
  return message
}

/**
 * 获取所有语言文件
 * @param {Object} mList
 */
function getLangFiles(mList, msg) {
  for (let path in mList) {
    if (mList[path].default) {
      //  获取文件名
      let pathName = path.substr(path.lastIndexOf('/') + 1, 5)

      if (msg[pathName]) {
        msg[pathName] = {
          ...mList[pathName],
          ...mList[path].default
        }
      } else {
        msg[pathName] = mList[path].default
      }
    }
  }
}

//注册i8n实例并引入语言文件
const i18n = createI18n({
  legacy: false, // 使用Composition API，这里必须设置为false
  globalInjection: true,
  global: true,
  locale: localStorage.getItem('language') || 'zh-CN',
  fallbackLocale: 'zh-CN', // 默认语言
  messages: getLangAll()
})

export default i18n

const Menus = {
    userManage: "用户管理",
    infoManage: "信息管理",
    settings: "设置",
    changeLanguage: "英文",
};
const userTable = {
    nickname: "昵称",
    phoneNumber: "手机号",
    sex: "性别",
    address: "地址",
    online: "是否在线",
    action: "操作"
}
// 按功能模块导出
export default {
    Menus,
    userTable
};

const Menus = {
    userManage: "User management",
    infoManage: "Information management",
    settings: "Settings",
    changeLanguage: "Chinese",
};
const userTable = {
    nickname: "nickname",
    phoneNumber: "Mobile Phone",
    sex: "sex",
    address: "Address",
    online: "Online",
    action: "Action"
}
// 按功能模块导出
export default {
    Menus,
    userTable
};

// 国际化多语言
import i18n from './locales/index'

createApp(App).use(i18n).mount('#app')

import i18n from '../locales/index'
console.log(i18n.global.t("userTable.nickname"))

<template>
  <button @click="changeLanguage">change language</button>
</template>

<script setup>
import { useI18n } from "vue-i18n";
const { locale } = useI18n({ useScope: "global" });
function changeLanguage() {
  localStorage.setItem('language', locale.value === "en-US"? "zh-CN":"en-US")
  router.go(0)
}
</script>