1.使用npm安裝
npm install vue-i18n
2.在main.js中引用
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
3.準備中英文數據
中英文文件中示例代碼
module.exports = {
navigation: {
home:"Home",
productCenter:"productCenter",
},
homePage:{
VDIcloudDesktop:"VDIcloudDesktop",
}
}
module.exports = {
navigation: {
home:"首頁",
productCenter:"產品中心",
},
homePage:{
VDIcloudDesktop:"VDI雲桌面",
}
}
4.創建帶有選項的 VueI18n 實例,在main.js中
通過session來存儲lang標誌,頁面初次進入沒有session時,lang爲zh,顯示內容中文
const i18n = new VueI18n({
locale: sessionStorage.getItem('lang') || 'zh', // 語言標識
//this.$i18n.locale // 通過切換locale的值來實現語言切換
messages: {
'zh': require('./i18n/lang/zh'), // 中文語言包
'en': require('./i18n/lang/en') // 英文語言包
}
})
5.在導航欄中編寫用來切換的標籤
<li v-if="lang ==='English'">
<span @click="changeCn" style="display: block">中文</span>
</li>
<li v-else="lang ==='中文'">
<span @click="changeEn" style="display: block">English</span>
</li>
data (){
return{
lang: (sessionStorage.getItem('lang') === 'en') ? "English" : "中文",
}
},
methods:{
changeCn(){
this.lang = "中文";
this.$i18n.locale = 'zh';
sessionStorage.setItem('lang','zh');
},
changeEn(){
this.lang = "English";
this.$i18n.locale = 'en';
sessionStorage.setItem('lang','en')
},
}
6.在組建中使用數據
<li @click="getBottom" class="bottomClass"> {{ $t("navigation.home") }}</li>
點擊時就可以實現中英文切換