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