1.下載

npm install vue-i18n

2.創(chuàng)建中英文包

2.1 中文包

2.2 英文包

3.在main里面引入

import VueI18n from 'vue-i18n';Vue.use(VueI18n);const i18n = new VueI18n({ 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') }});new Vue({ 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.使用按鈕進(jìn)行手動(dòng)切換，這里我用了switch用true和false來(lái)識(shí)別中英文，用這種方法也可以用于其他語(yǔ)言切換

<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實(shí)現(xiàn)中英文切換的方法的詳細(xì)內(nèi)容，更多關(guān)于vue 中英文切換的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！