Vue中使用vue-i18插件實現(xiàn)多語言切換功能
更新時間：2018年04月25日 10:23:57 作者：littlepath
在基于vue-cli項目開發(fā)過程中，多語言切換功能可使用vue-i18插件，這篇文章分步驟給大家介紹了Vue中使用vue-i18插件實現(xiàn)多語言切換功能，感興趣的朋友一起看看吧
在基于vue-cli項目開發(fā)過程中，多語言切換功能可使用vue-i18插件，具體實現(xiàn)方法如下：
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:"這里是內(nèi)容"
}
}
en.js
module.exports = {
menu : {
home:"home"
},
content:{
main:"this is content"
}
}
1）在標簽內(nèi)作為正文內(nèi)容
<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插件使用完結(jié)。
總結(jié)
以上所述是小編給大家介紹的Vue中使用vue-i18插件實現(xiàn)多語言切換功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
Vue 頁面切換效果之 BubbleTransition(推薦)
使用 vue，vue-router，animejs 來講解如何實現(xiàn)vue頁面切換效果之 BubbleTransition，需要的朋友參考下吧2018-04-04
vue中對監(jiān)聽esc事件和退出全屏問題的解決方案
這篇文章主要介紹了vue中對監(jiān)聽esc事件和退出全屏問題的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家詳細介紹了Vue和原生JS中如何使用自定義字體,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以了解下2024-01-01
使用vant-picker實現(xiàn)自定義內(nèi)容,根據(jù)內(nèi)容添加圖標
這篇文章主要介紹了使用vant-picker實現(xiàn)自定義內(nèi)容，根據(jù)內(nèi)容添加圖標，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
在Vue中最重要、最核心的概念之一就是響應式系統(tǒng)。這個系統(tǒng)使得Vue能夠自動追蹤數(shù)據(jù)變化，并在數(shù)據(jù)發(fā)生變化時自動更新相關的DOM元素。本文將會探討Vue響應式系統(tǒng)的實現(xiàn)原理及其底層實現(xiàn)2023-03-03
本文主要講解了如何在vue中使用pdfjs預覽pdf文件，這樣的優(yōu)勢是無須讓用戶安裝專門的軟件即可實現(xiàn)預覽，下面就看看如何實現(xiàn)這個需求2021-06-06
vue?eslint報錯error?"Component?name?"*****"
這篇文章主要給大家介紹了關于vue?eslint報錯error?“Component?name?“*****“?should?always?be?multi-word”的解決方法,文中通過圖文以及實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09
詳解mpvue實現(xiàn)對蘋果X安全區(qū)域的適配
這篇文章主要介紹了詳解mpvue實現(xiàn)對蘋果X安全區(qū)域的適配，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-07-07
vue實現(xiàn)大文件分片上傳與斷點續(xù)傳到七牛云
這篇文章介紹了vue實現(xiàn)大文件分片上傳與斷點續(xù)傳到七牛云的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
Vue中splice()方法對數(shù)組進行增刪改等操作的實現(xiàn)
vue中對數(shù)組的元素進行刪除,以前一直以為這個方法是vue中特有的,后來百度之后才知道原來是js的一個寫法,下面這篇文章主要給大家介紹了關于Vue中splice()方法對數(shù)組進行增刪改等操作的實現(xiàn)方法,需要的朋友可以參考下2023-05-05