VueI18n插件的簡單應用於國際化

　　作為一個前端小白，剛剛接觸學習Vue.js框架結合Element-ui組件開發項目。由於最近需要實現國際化功能，在看element-ui的開發文檔時，只有簡單的引入沒有應用實例，對於我這種小白不能get到，無從下手。在網上也查了很多次，發現資料極其少，可能是兩者恰好是近年新興起來的，成熟的參考資料不是那么多。於是自己在參考相關文檔后，多次嘗試后，終於成功了。寫下這部分的總結便於自己以后參考，也希望有可能幫到有需要的人。

一、Vuei18n的安裝（這個是基於已經安裝了Vue的前提下哦） 
　　命令行：npm install vue-i18n –save 
二、使用（參考於網上現有的資料） 
　　也是先在main.js入口文件中進行引入配置。分如下兩種情況： 
　　1. 直接在main.js中寫入語言的對應，根據自己實際情況來選擇所需要的語言，這里以中文和英語為例嘗試：

 （1）main.js

import VueI18n from 'vue-i18n' 　　 Vue.use(VueI18n); 　　 const i18n = new VueI18n({ 　　 locale: 'Chinese', // 語言標識
　　 messages:{ 　　 Chinese : { 　　 message: { 　　 hello: '你好世界!', 　　 do:'搜一下', 　　 center:'處理中心', 　　 work:'我的工作台', 　　 choose1:'選擇1', 　　 choose2:'選擇2', 　　 choose3:'選擇3', 　　 dan:'訂單管理' 　　 } 　　 }, 　　 English : { 　　 message: { 　　 hello: 'hello world', 　　 do:'search', 　　 center:'processing center', 　　 work:'my Workbench', 　　 choose1:'option1', 　　 choose2:'option2', 　　 choose3:'option3', 　　 dan:'Order management' 　　 } 　　 } 　　 } 　　}) 　　/*還需要將VueI18n掛載到Vue實例上，可全局使用*/
　　new Vue({ 　　 el: '#app', 　　 i18n, 　　 render: h => h(App) 　　})

 

　　（2）.vue文件 

　　語言下拉選擇框的下面是一個簡單的導航欄和form表單的一個輸入框，使用element-ui插件中的，用來簡單試驗是否可以配套element-ui使用。因此簡單的設置，下拉列表默認值為中文，表單數據也在數據中定義一下。
　　！！然后elment-ui相關要顯示的，寫法有些不一樣： v-bind 屬性名 = "$t('message.xx')" 　　或 :屬性名 = "$t('message.xx')" 

　　最后還需要將調用watch函數，對我們的語言變量進行監聽，實時監測所選的語言，按key進行匹配。

　　2 .也可以將翻譯文件單獨寫在assets，在main.js文件中引用即可。如下圖所示：我在assets目錄下新建了一個translate文件夾，分別存放了中文和英文翻譯，便於后面的修改和添加。

　　Chinese.js代碼如下：　

export const Ch = 　　{ 　　 message: { 　　 hello: '你好世界!', 　　 do:'搜一下', 　　 center:'處理中心', 　　 work:'我的工作台', 　　 choose1:'選擇1', 　　 choose2:'選擇2', 　　 choose3:'選擇3', 　　 dan:'訂單管理', 　　 activityname:'活動名稱' 　　 } 　　

　　同理English.js也一樣，下面在main.js中就修改為：

const i18n = new VueI18n({ 　　locale: 'Chinese', // 語言標識
 　　 messages:{ 　　 Chinese : Ch, 　　 English : En 　　 } 　　})

　最后說下自己犯的兩個錯誤： 
　　1.一定要用es6語法將需要引用的文件export出去，剛開始我就沒有這樣，直接在main.js里引用沒有作用T T； 
　　2.在main.js里import時，一定要加{ }，沒有加的后果也是…… 
　　！！！！！！！可能自己在這方面比較欠缺，在后來第二次項目中使用時，又忘記了加{}，找了好久的原因，事不過三，需要自己謹記。

　　三.最終實現效果如下：

 選擇要設置的語言，默認為中文顯示，如下圖所示： 

 當切換為英文時，效果如下： 

　　有什么不對的地方，希望大家能幫忙指正，一起進步。還有關於element-ui中的國際化的使用，自己也一直沒有弄明白，如果大佬們知道能分享給我^_^

///////////////////////////////////////////////////////////////////////////////////////////////////////////////
　　又過了一周的時間，自己在項目中重新使用時，又遇到了很多新的問題。例如： 
　　（1）雖然在main.js里使用了全局掛載，在各個子組件中使用時，我又分別調用了watch函數去監聽locale變量的值變化，，，這樣其實是沒有必要的。因為我的導航菜單項的路由跳轉控制在Home.vue中，在Home.vue中進行監聽時即使子路由跳轉也會知道locale的值，從而改變語言狀態顯示。 
　　（2）國際化的模板語言是$t()，而不是{{}}，因此在路由跳轉時，原本就是通過遍歷顯示菜單項，然后每個菜單項匹配router.js中的name,原本的未國際化之前，代碼實現如下： 

　　修改為： 

　　只要把route.js中定義路由項的地方，路由的name改為key就可以了，在i18n中$t指令是先通過找到item.name中對應的key，再通過key去匹配翻譯文件中的語言狀態。 
暫且遇到的坑都記在這里了……^_^ 接下來的日子，希望自己能繼續保持學習和記錄的熱情，一步一步地成長，♪(^∇^*)

、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、 、、、、、、、 后來的后來，在vue中的js部分，包括data里的數據及methods里的方法都不可避免的使用到了國際化標簽。需要在調用處通過this關鍵詞調用國際化指令t，即this.t（’key’），確實一般實現上都沒有問題。 
但后來發現，在elment-ui表單處必然涉及到表單驗證，如果是直接在data里寫簡單的不為空的提示信息驗證，如下所示： 

　　驗證信息不能被識別，提示信息仍是原樣輸出，時間緊迫我只能通過在函數語句中調用實現： 
 
　　通過callback語句調用，使用this.$t(‘key’)又能匹配識別。目前還沒有找到原因，希望有知道的小伙伴務必分享給我，非常感謝咯。

 

聲明：本博文由博主Bonjourjw（http://blog.csdn.net/bonjourjw）原創編輯，我經其同意后轉載過來供大家交流學習，未經其同意禁止轉載！