vue-i18n分模块批量导入处理

目录结构

lang/index.js

    import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

function getMessages (languages) {
  // 获取模块名
  const modules = new Set(require.context('./modules', true, /\.json$/).keys().map(key => key.split('/')[1]))
  // 最终返回的messages对象初始化
  const messages = {}
  // messages添加支持语言的属性
  languages.forEach(language => {
    messages[language] = {}
  })
  // 遍历模块，将内容添加到 messages.语言.上
  modules.forEach(moduleName => {
    languages.forEach(async lang => {
      // 加 try ... catch 防止语言文件缺失 import 报 error，影响执行
      try {
        const { default: obj } = await import('./modules/' + `${moduleName}/${lang}.json`)
        !messages[lang][moduleName] && (messages[lang][moduleName] = {})
        Object.assign(messages[lang][moduleName], obj)
      } catch (e) {
        console.warn(e.message)
      }
    })
  })
  console.log(messages)
  return messages
}
// 所支持的语言选项
const languages = ['zh_CN', 'en']

const i18n = new VueI18n({
  locale: 'zh-CN', // 设置默认语言环境
  messages: getMessages(languages)
})

// 将 i18n 实例导出，用于在 new Vue 时引入
export default i18n

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import i18n from './lang'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#app')