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

二、切换语言 $Local 方法配置#

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';
// vantLocal.js
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);