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

最新推荐文章于 2025-03-24 09:27:37 发布

原创最新推荐文章于 2025-03-24 09:27:37 发布 · 1.1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

VUE

该博客介绍了如何在项目中解决因多语言文件导致的页面加载过慢问题。通过动态导入Vue-i18n库，根据用户浏览器的语言设置或本地存储的首选语言来加载相应的语言包，从而减少不必要的资源加载，提高页面性能。

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

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

标签

#vue.js