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

Posted chenyi4

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 多语言 vue-i18n 按需加载,异步调用相关的知识,希望对你有一定的参考价值。

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}`
      });
    }
  }

 

 

以上是关于vue 多语言 vue-i18n 按需加载,异步调用的主要内容,如果未能解决你的问题,请参考以下文章

vue项目支持多语言(vue-i18n)

vue项目支持多语言(vue-i18n)

vue-i18n 多语言开发

vue-i18n 多语言开发

Vue-i18n多语言搭配vuex的混合使用-案例

VUE+webpack+npm项目中的多语言vue-i18n@8.x