vue：动态加载指定多语言文件

背景：项目中涉及多个国家使用，每个页面都添加了四个国家的多语言，使用绝对路径引入导入所有的多语言的都会进行加载，造成页面加载文件过多
解决方案：动态加载我当前需要使用的多语言文件：

import { createI18n } from 'vue-i18n'
import path from 'path'
// import en from './en-US'
// import cn from './zh-CN'
// import de from './de-DE'
// import fr from './fr-FR'


export const LOCALE_OPTIONS = [
  { label: '中文', value: 'zh-CN' },
  { label: 'English', value: 'en-US' },
  { label: 'German', value: 'de-DE'},
  { label: 'French', value: 'fr-FR'},
]

const defaultLang = (navigator.language === 'en' ? 'en-US' : navigator.language) || 'zh-CN'
const defaultLocale = localStorage.getItem('arco-locale') || defaultLang

const obj = {}
const getLang = async(defaultLocale:any)=>{
  const files = import.meta.glob('./*')
  // let modules:any = null
  for (const key in files) {
      const localKey = key.replace(/(\.\/)|(\.ts)/g, '')
      if(localKey===defaultLocale){
        files[key]().then((res:any)=>{
          obj[defaultLocale]= res.default
        })
      }
  }

getLang(defaultLocale)


const i18n = createI18n({
  legacy: false,
  locale: defaultLocale,
  fallbackLocale: 'en-US',
  messages: obj
})


// const i18n = createI18n({
//   legacy: false,
//   locale: defaultLocale,
//   fallbackLocale: 'en-US',
//   messages: {
//     'en-US': en,
//     'zh-CN': cn,
//     'de-DE': de,
//     'fr-FR': fr,
//   }
// })

export default i18n