vue 搭配vant使用i18n

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

zh.js

export default {
    bottomBar:{
        text:"测试首页"
    }
}

en.js

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

zhCHT.js

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

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

// vant翻译
import {
    Locale
} from 'vant';
import zhCN from 'vant/lib/locale/lang/zh-CN';
import zhHK from 'vant/lib/locale/lang/zh-HK';
import enUS from 'vant/lib/locale/lang/en-US';
var lang = localStorage.getItem("lang") || "zhCN";
changeLang(lang);

function changeLang(newlang) {
    switch (newlang) {
        case "zhCN":
            Locale.use('zhCN', zhCN);
            break;
        case "en":
            Locale.use('en', enUS);
            break;
        case "zhCHT":
            Locale.use('zhHK', zhHK);
            break;
    }
}

export function Local(mylang) {
    changeLang(mylang)
}

 

index.js下写

import Vue from 'vue'

import VueI18n from 'vue-i18n'



import en from './en';

import zhCN from './zh';

import zhCHT from './zhCHT';



Vue.use(VueI18n)

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

const i18n = new VueI18n({

locale: localStorage.getItem('language') || "zhCN", // 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");

//获取选择的语言

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