vue 搭配vant使用i18n

个人需要，创建lang文件夹分别有,

zh.js

export default {
    bottomBar:{
        text:"text shouye"
    }
}

en.js

export default {
    bottomBar:{
        text:"text shouye"
    }
}

zhCHT.js

export default {
    bottomBar:{
        text:"測試首頁"
    }
}

vantLocale.js下写更改vant内容的语言

import {
    Locale
} from 'vant';
import enUS from 'vant/lib/locale/lang/en-US';
import zhCN from 'vant/lib/locale/lang/zh-CN';
import zhHK from 'vant/lib/locale/lang/zh-HK';
export function Local() {
    var lang = localStorage.getItem("language");
    if (lang == "zh") {
        Locale.use('zh', zhCN);

    } else if (lang == "en") {
        Locale.use('en', enUS);
    } else {
        Locale.use('zhCHT', zhHK);
    }
}

index.js下写

import Vue from 'vue'

import VueI18n from 'vue-i18n'



import en from './en';

import zh from './zh';

import zhCHT from './zhCHT';



Vue.use(VueI18n)

const messages = {
  en: {
    ...en
  },
  zh: {
    ...zh
  },
  zhCHT: {
    ...zhCHT
  }
}

const i18n = new VueI18n({

locale: localStorage.getItem('language'), // set locale

messages  // set locale messages

})

export default i18n

main.js中引入

import i18n from "./lang"
import {Local} from "@/lang//vantLocale.js";
Vue.prototype.$Local = Local; 
//挂载

new Vue({
  i18n
}).$mount('#app')

//页面上更改语言并刷新不改变语言

this.$i18n.locale = "en";
this.$Local("en");    //更改vant的语言
localStorage.setItem("language", "en");

//预防清除了缓存出现没有翻译的情况，在设置语言页面mounted设置

this.$i18n.locale = localStorage.getItem("language") || "zh";