前端框架Vue.js——vue-i18n ，vue項目中如何實現國際化

天天學習一點點 編程PDF電子書、視頻教程免費下載：
http://www.shitanlife.com/code

 

 

1、前言

  趁着10月的最後一天，來寫一篇關於前端國際化的實踐型博客。國際化應該都不陌生，就是一個網站、應用能夠實現語言的切換。

  在這就不談原理，只說說如何實現中英文的切換。作技術的總得先把 demo 作出來嘛。

2、demo 場景需求分析

需求很簡單，左上角 ‘’網易雲音樂‘’就是一箇中英文切換的按鈕，點擊彈出提示框，確認切換語言後，實現英文版本。

切換成英文版本：

3、實現國際化

  首先，我開發是以 vue 爲技術棧，因此如題用的國際化插件是 vue-i18n，附上 github 傳送門。

一、咱們得先有開發環境，先有項目跑起來，我推薦若是是喜歡用 vue 的小夥伴，能夠嘗試 vue-cli　官方腳手架。這邊有我整理的一個腳手架 demo ，有助於你快速的進行 vue 模塊化開發。

二、咱們須要安裝 vue-i18n, 推薦 npm 包依賴：

$ npm install vue-i18n

 

固然你也能夠這樣：

<script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

三、注入 vue 實例中，項目中實現調用 api 和 模板語法

這邊我是順着使用 npm 安裝依賴進行。先在 main.js 中引入 vue-i18n。

import VueI18n from 'vue-i18n' Vue.use(VueI18n) // 經過插件的形式掛載 const i18n = new VueI18n({ locale: 'zh-CN', // 語言標識 //this.$i18n.locale // 經過切換locale的值來實現語言切換 messages: { 'zh-CN': require('./common/lang/zh'), // 中文語言包 'en-US': require('./common/lang/en') // 英文語言包 } }) /* eslint-disable no-new */ new Vue({ el: '#app', i18n, // 不要忘記 store, router, template: '<App/>', components: { App } })

上面的代碼正式將 vue-i18n 引入 vue 項目中，建立一個 i18n 實例對象，方便全局調用。咱們經過 this.$i18n.locale 來進行語言的切換，一樣的我這邊的例子裏就是經過點擊事件，點擊‘’網易雲音樂‘’，來觸發事件，切換locale 的值。

四、ok, 引入的事情就是這樣，那麼既然實現國際化，這邊簡單的是中英文切換，那麼天然咱們須要中英文兩套語言的文件，vue-i18n中相對簡單，只須要兩個 js 文件，經過 require 的形式引入到 main.js。

en.js 英文語言包：

export const m = { music: 'Music',//網易雲音樂 findMusic: 'FIND MUSIC',//發現音樂 myMusic: 'MY MUSIC',//個人音樂 friend: 'FRIEND',//朋友 musician: 'MUSICIAN',//音樂人 download: 'DOWNLOAD'//下載客戶端 }

zh.js中文語言包：

export const m = { music: '網易雲音樂', findMusic: '發現音樂', myMusic: '個人音樂', friend: '朋友', musician: '音樂人', download: '下載客戶端' }

最後咱們只須要經過觸發事件的形式，來控制 locale 的值，去調用對應的語言包就能夠實現國際化啦。

五、組件中如何去切換 locale 的值，實現語言切換。

locale: 'zh-CN', // 語言標識 messages: { 'zh-CN': require('./common/lang/zh'), // 中文語言包 'en-US': require('./common/lang/en') // 英文語言包 }

在 main.js 中的代碼中，能夠看到，當 locale 的值爲‘zh-CN’時，版本爲中文；當 locale 的值爲‘en-US’,版本爲英文。固然你也能夠換成 zh 和 en，這個不固定，只須要對應上。

好了，如今來看一下，我組件中的一個點擊事件中如何進行切換。

/** * 切換語言 */ changeLangEvent() { this.$confirm('肯定切換語言嗎?', '提示', { confirmButtonText: '肯定', cancelButtonText: '取消', type: 'warning' }).then(() => { if ( this.lang === 'zh-CN' ) { this.lang = 'en-US'; this.$i18n.locale = this.lang;//關鍵語句 }else { this.lang = 'zh-CN'; this.$i18n.locale = this.lang;//關鍵語句 } }).catch(() => { this.$message({ type: 'info', }); }); }

這邊的重點就是，點出的‘’關鍵語句‘’：this.$i18n.locale,當你賦值爲‘zh-CN’時，導航欄就變成中文；當賦值爲 ‘en-US’時，就變成英文。效果圖就是文章前面的樣子。

六、到這，前端 vue-i18n 國際化插件在 vue-cli 模塊化環境中的開發實踐就所有完成了。

4、vue-i18n 數據渲染的模板語法

咱們知道 vue 中對於文字數據的渲染，有以‘’{{}}‘’或者 v-text、v-html等的形式，一樣的使用國際化後，依舊能夠沿用，但須要一點修改。 
v-text:

<span v-text="$t('m.music')"></span>

{{}}:

<span>{{$t('m.music')}}</span>

5、vue-cli 、vue-i18n 開發練手項目地址

項目開源在 github 上，文檔較完善，能夠嘗試練手，若是你以爲還能夠，感謝能給一個 star 。

若是 ，在 vue 開發中遇到相關問題，也能夠在下面留言，我會不定時嘗試幫你解答。一樣以前也寫過一些在開發中解決的方案，能夠看往期的博客，一個在路上的前端小白，歡迎指正。

 

 

 

 

 

天天學習一點點 編程PDF電子書、視頻教程免費下載：http://www.shitanlife.com/code