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