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)文章

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中如何使用自定義字體
這篇文章主要為大家詳細(xì)介紹了Vue和原生JS中如何使用自定義字體,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,感興趣的小伙伴可以了解下
2024-01-01
使用vant-picker實現(xiàn)自定義內(nèi)容,根據(jù)內(nèi)容添加圖標(biāo)
這篇文章主要介紹了使用vant-picker實現(xiàn)自定義內(nèi)容，根據(jù)內(nèi)容添加圖標(biāo)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-12-12
Vue響應(yīng)式原理與虛擬DOM實現(xiàn)步驟詳細(xì)講解
在Vue中最重要、最核心的概念之一就是響應(yīng)式系統(tǒng)。這個系統(tǒng)使得Vue能夠自動追蹤數(shù)據(jù)變化，并在數(shù)據(jù)發(fā)生變化時自動更新相關(guān)的DOM元素。本文將會探討Vue響應(yīng)式系統(tǒng)的實現(xiàn)原理及其底層實現(xiàn)
2023-03-03
如何在vue中使用pdfjs預(yù)覽pdf文件
本文主要講解了如何在vue中使用pdfjs預(yù)覽pdf文件，這樣的優(yōu)勢是無須讓用戶安裝專門的軟件即可實現(xiàn)預(yù)覽，下面就看看如何實現(xiàn)這個需求
2021-06-06
vue?eslint報錯error?"Component?name?"*****"
這篇文章主要給大家介紹了關(guān)于vue?eslint報錯error?“Component?name?“*****“?should?always?be?multi-word”的解決方法,文中通過圖文以及實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-09-09
詳解mpvue實現(xiàn)對蘋果X安全區(qū)域的適配
這篇文章主要介紹了詳解mpvue實現(xiàn)對蘋果X安全區(qū)域的適配，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-07-07
vue實現(xiàn)大文件分片上傳與斷點續(xù)傳到七牛云
這篇文章介紹了vue實現(xiàn)大文件分片上傳與斷點續(xù)傳到七牛云的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-06-06
Vue中splice()方法對數(shù)組進(jìn)行增刪改等操作的實現(xiàn)
vue中對數(shù)組的元素進(jìn)行刪除,以前一直以為這個方法是vue中特有的,后來百度之后才知道原來是js的一個寫法,下面這篇文章主要給大家介紹了關(guān)于Vue中splice()方法對數(shù)組進(jìn)行增刪改等操作的實現(xiàn)方法,需要的朋友可以參考下
2023-05-05