在基于vue-cli項目開發過程中，多語言切換功能可使用vue-i18插件，具體實現方法如下：
step1: 在項目中安裝vue-i18插件
cnpm install vue-i18n --save-dev
step2:在項目的入口文件main.js中引入vue-i18n插件
import Vue from 'vue'
import router from './router'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: 'zh', // 語言標識
messages: {
'zh': require('./assets/lang/zh'),
'en': require('./assets/lang/en')
}
})
// vue實例中引入
/* eslint-disable no-new */
new Vue({
el: '#app',
i18n,
router,
template: '<Layout/>',
components: {
Layout
},
})
step3:頁面中使用
在模板中使用時，大概有以下3種情況，若有疏漏，望大家指正
zh.js
module.exports = {
menu : {
home:"首頁"
},
content:{
main:"這里是內容"
}
}
en.js
module.exports = {
menu : {
home:"home"
},
content:{
main:"this is content"
}
}
1）在標簽內作為正文內容
<div class="title">{{$t('menu.home')}}</div>
2)作為標簽屬性使用
<input :placeholder="$t('content.main')" type="text">
3)作為js中文字使用時
console.log(this.$t('content.main'));
4)待補充...
step4:頁面上進行中英文切換，在中英文切換的按鈕上綁定事件，如下：
tabEn: function () {
this.$i18n.locale = 'en'
},
tabCn: function () {
this.$i18n.locale = 'zh'
}
至此，vue-i18n插件使用完結。
總結
以上所述是小編給大家介紹的Vue中使用vue-i18插件實現多語言切換功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
