vue及vant框架,多语言配置

 1.安装 vue-i18n,( cnpm install vue-i18n --save )
 2.在入口,main.js 中引入 （import Vuei18n from "vue-i18n"）
 3.配置插件 引入翻译文件
 let cn = require( '@/assets/lang/zh_CN'); // 中文简体;
 let en = require( '@/assets/lang/en_US'); // 英文;
 let hk = require( '@/assets/lang/zh_HK'); // 中文繁体(香港); 

 Vue.use(Vuei18n);
 const i18n = new Vuei18n({
   locale:window.localStorage.getItem('language') == null? 'hk': window.localStorage.getItem('language'),
   messages:{
     'cn':{...cn},
     'en':{...en},
     'hk':{...hk},
  },
  silentTranslationWarn: false, // 是否关闭翻译报错;
 });

 4.实例化后传入配置参数中;
 let vm = new Vue({
   router,
   i18n,
   store,
   render: h => h(App)
 }).$mount('#app');

 5.在其他页面 设置中切换语言版本;
 methods: {
   changeLanguage(item, index) {
     this.i = index;
     this.$i18n.locale = item.id; // 'cn'/'hk'/'en'
     this.$Local(item.id);        // 调用原型上的$Locale; vant 的设置
     window.localStorage.setItem("language", item.id);
   }
 } 

 **********vant的配置**********vant的配置**********vant的配置**********
 1.在assets文件下新建一个lang文件夹，新建文件vantLocal.js 代码如下引入
  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 default function locales(a) {
  if(a == 'en'){
    Locale.use('en',enUS)
  }
  if(a == 'cn'){
    Locale.use('cn',zhCN)
  }
  if(a=='hk'){
    Locale.use('hk',zhHK)
  }
 }
 2.main.js 中引入 import locales from './assets/lang/vantLocal.js'
 3.将次方法暴露给Vue原型上
   Vue.prototype.$Local = locales;
 4.设置默认语言
   let z = window.localStorage.getItem('language') == null? 'hk': window.localStorage.getItem('language');
   locales(z);