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', // 語言標(biāo)識
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）在標(biāo)簽內(nèi)作為正文內(nèi)容
<div class="title">{{$t('menu.home')}}</div>
2)作為標(biāo)簽屬性使用
<input :placeholder="$t('content.main')" type="text">
3)作為js中文字使用時
console.log(this.$t('content.main'));
4)待補(bǔ)充...
step4:頁面上進(jìn)行中英文切換，在中英文切換的按鈕上綁定事件，如下：
tabEn: function () {
this.$i18n.locale = 'en'
},
tabCn: function () {
this.$i18n.locale = 'zh'
}
至此，vue-i18n插件使用完結(jié)。
總結(jié)
以上所述是小編給大家介紹的Vue中使用vue-i18插件實現(xiàn)多語言切換功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
nuxt 實現(xiàn)在其它js文件中使用store的方式
這篇文章主要介紹了nuxt 實現(xiàn)在其它js文件中使用store的方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要為大家介紹了vue組合式API淺顯入門示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要介紹了Vue router安裝及使用方法解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-12-12
Vue.js中使用iView日期選擇器并設(shè)置開始時間結(jié)束時間校驗功能
本文通過實例代碼給大家介紹了Vue.js中使用iView日期選擇器并設(shè)置開始時間結(jié)束時間校驗功能,需要的朋友可以參考下2018-08-08
這篇文章主要介紹了vue 自動化路由實現(xiàn)代碼，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
Vue純前端實現(xiàn)導(dǎo)出Excel并修改樣式
這篇文章主要為大家詳細(xì)介紹了Vue如何利用xlsx-style庫實現(xiàn)導(dǎo)出Excel并修改樣式的功能,文中的示例代碼講解詳細(xì),有需要的可以參考下2024-01-01
這篇文章主要介紹了vue實現(xiàn)圖片懶加載的方法,結(jié)合實例形式分析了vue.js圖片懶加載插件安裝、使用方法與相關(guān)操作注意事項,需要的朋友可以參考下2020-02-02
Vue ESLint是一個基于ESLint的插件,它專門為Vue.js應(yīng)用設(shè)計,用于提供JavaScript代碼風(fēng)格檢查和最佳實踐規(guī)則,Vue項目通常會集成ESLint,目的是為了提升代碼質(zhì)量、保持一致性和可維護(hù)性,本文介紹了Vue項目中禁用ESLint的幾種常見方法,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了Element Breadcrumb 面包屑的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
為了給Vue一個提示,以便它能跟蹤每個節(jié)點的身份,從而重用和重新排序現(xiàn)有元素,你需要為每項提供一個唯一key屬性,下面這篇文章主要給大家介紹了關(guān)于Vue深入理解之v-for中key的真正作用,需要的朋友可以參考下2022-05-05