vue 多语言 vue-i18n 按需加载，异步调用

Posted 2020-11-26 chenyi4

http://kazupon.github.io/vue-i18n/zh/guide/lazy-loading.html

一次加载所有翻译文件是过度和不必要的。

因为可能一直用中文，那么就不会用到英文的数据,就没必要去加载。只在请求的时候去加载它

1.新建i18n.js

import Vue from ‘vue‘
import VueI18n from ‘vue-i18n‘
import zh from ‘@/assets/language/zh‘
import axios from ‘axios‘
Vue.use(VueI18n);

export const i18n = new VueI18n({
    locale: ‘zh‘,
    // messages
    messages: {
        zh:zh.zh
    }
});

const loadedLanguages = [‘zh‘]; //当前已经加载完全的语言
//en //jp
//切换的时候，根据语言加载各个国家的语言


function setI18nLanguage(lang){
    i18n.locale = lang;  
   //设置i18n的默认语言
    axios.defaults.headers.common[‘Accept-Language‘] = lang; //设置ajax请求的语言
    document.querySelector(‘html‘).setAttribute(‘lang‘, lang) //设置html的语言
    return lang
}   

export function loadLanguageAsync (lang) {
    if (i18n.locale !== lang) { //如果传入的变量 不等于 i18插件的语言值 (切换过一次，再切换第二次就不会再去加载一遍了)
        if(!loadedLanguages.includes(lang)){ //如果加载的这个语言不包含在默认加载的语言里面
            //就去异步加载它
            return import(`@/assets/language/${lang}`).then(msgs => { //去引入这个值
                i18n.setLocaleMessage(lang, msgs.default[lang]); 
                //设置i18n的语言message切换成这个
                loadedLanguages.push(lang); //本地已经加载的语言 加入 loadedLanguages
                return setI18nLanguage(lang);
                 //返回并且设置
            });

        } //如果传入的语言变量值等于现在i18n控件的默认语言值 //不等于也会去设置
        return Promise.resolve(setI18nLanguage(lang)); //处理一些默认信息
    }
    return Promise.resolve(lang);
}

export default i18n;

2.zh.js. en.js写对应英文的

module.exports = {
        zh: { 
         message: {
            title: ‘运动品牌‘,
           
           },
           placeholder: {
            enter: ‘aaaa‘
           },
           brands: {
              .....自己写
           }
        }
    }

3.main.js 引入

import i18n from ‘i18m.js‘
Vue.use(VueI18n);
new Vue({
　　i18n
});

router.beforeEach((to, from, next) => {
  const lang = to.query.lang||‘zh‘;
   loadLanguageAsync(lang).then(() => {next()})
});

拦截to的参数，不能写from

4.多选下拉框

 <select v-model="lang">
        <option v-for="(lang, i) in langs" :key="`Lang${i}`" :value="lang">{{ lang }}</option>
 </select>

data(){
    return {
      langs: [
        ‘zh‘,‘en‘
      ],
      lang: ‘en‘
    }
  },
  created(){
    const self = this;
    this.$nextTick(()=>{
      setTimeout(function(){
        self.lang = self.$route.query.lang;
      },100);
    });
   
  },
  watch:{
    lang(value){
      this.$router.push({
            path: `/?lang=${value}`
      });
    }
  }