vue-i18n 国际化 异步加载语言包

使用vue-i18n做多语言网站

安装

 npm install vue-i18n --save

示例为中英双语，新建目录问lang 目录下新建文件en.js cn.js

目录结构

i18n
    index.js
    lang
        cn.js
        en.js

index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'cn',    // 语言标识
  messages: {}
})

// 异步加载语言包
function loadLanguageAsync (lang) {
  import(`@/i18n/lang/${lang}`).then(msgs => {
  i18n.setLocaleMessage(lang, msgs.default)
  i18n.locale = lang
  return lang
  })
}
// 在手动切换语言时调用此方法，页面初始化时需加载一个默认语言，在APP.vue执行一次
Vue.prototype.$loadLanguageAsync = loadLanguageAsync
export default i18n

cn.js 

// cn.js
export default {
  '1000': '注册',
  '1001': '登录'
}

en.js 

// en.js
export default {
  '1000': 'register',
  '1001': 'login'
}

---

这里是额外的话

当语言包字段较多，不利于后期维护更新，可将字段文件分组：

方式一

在语言包内将字段分组，结构一目了然， 如下：

cn.js

export default {
  'group': {
      'text1': '字段一',
      'text2': '字段二'
  },
  'group2': {
    'text1': '字段一',
    'text2': '字段二'
  }
}

.vue 页面使用

<template>
  <div>
    {{$t('group.text1')}}
  </div>
</template>

<script>
  export default {
    name: 'i18n'
  }
</script>

<style lang="scss" scoped>

</style>

方式二

分批次输出字段，亦可以分模块文件，异步加载各个模块的字段语言

cn.js

export const group1 = {
  'text1': '注册',
  'text2': '手机号码'
}
export const group2 = {
  'text3': '注册',
  'text4': '手机号码'
}

index.js

// 将语言包内字段重组，set 至i18n

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'cn',    // 语言标识
  messages: {}
})

// 异步加载语言包
function loadLanguageAsync (lang) {
  import(`@/i18n/lang/${lang}`).then(msgs => {
  // 将语言包内字段重组，set至i18n
  i18n.setLocaleMessage(lang, {...msgs.group1, ...msgs.group2})
  i18n.locale = lang
  return lang
  })
}
// 在手动切换语言时调用此方法，页面初始化时需加载一个默认语言
Vue.prototype.$loadLanguageAsync = loadLanguageAsync
export default i18n