1.下载

npm install vue-i18n

2.创建中英文包

2.1 中文包

2.2 英文包

3.在main里面引入

importVueI18nfrom"vue-i18n";Vue.use(VueI18n);consti18n=newVueI18n({locale:localStorage.getItem("lang")==(undefined||""||null)?"zh":localStorage.getItem("lang"),messages:{zh:require("../static/lang/text-zh.json"),en:require("../static/lang/text-en.json")}});newVue({router,store,i18n,render:h=>h(App)}).$mount("#app");

4.在组件中使用

<div>{{ $t('footer.home') }}</div>或者<input type="span" value="" :placeholder="$t('footer.home')" v-model="search" />或者this.$toast(this.$t('footer.home'))

5.使用按钮进行手动切换，这里我用了switch用true和false来识别中英文，用这种方法也可以用于其他语言切换

<switch@change="changeEn":checked="zhOren"/>changeEn(e){if(e.target.value){//中文this._i18n.locale='zh';localStorage.setItem('lang','zh');}else{//英文this._i18n.locale='en';localStorage.setItem('lang','en');}}

以上就是vue-i18n实现中英文切换的方法的详细内容，更多关于vue 中英文切换的资料请关注其它相关文章！