Vue國際化處理 vue-i18n 以及專案自動切換中英文

nxmin發表於2018-04-30

0. 直接上 預覽連結

Vue國際化處理 vue-i18n 以及專案自動切換中英文

1. 環境搭建

命令進入專案目錄,執行以下命令安裝vue 國際化外掛vue-i18n

npm install vue-i18n --save

2. 專案增加國際化翻譯檔案

在專案的src下新增lang資料夾增加中文翻譯檔案(zh_CN.js)以及英文翻譯檔案(EN.js),裡面分別儲存專案中需要翻譯的資訊。

lang檔案獲取地址

3. 專案引入

在專案的main.js中引入vue-i18n外掛,引入對應的翻譯檔案(zh_CN.js/EN.js)引入並結合Element-UI 國際化。 入下圖

vue-i18n

4. 專案使用

在中文翻譯檔案zh_CN中引入Element-UI的中文指令碼,在英文翻譯檔案EN中引入Element-UI的英文指令碼,並且在檔案中加入要翻譯的內容,具體如下:

  • Zh_CN.js:
  • EN.js: 然後在要翻譯的地方進行翻譯。
如果是element-ui 的,在要翻譯的前面加上冒號

比如:label=“使用者姓名” 就改成 :label=”$t(‘order.userName’)”

如果是html 顯示的,就改用以下寫法:

直接寫成 {{$t(‘order.userName’)}},就會直接去往翻譯指令碼里面自動匹配。

選擇語言之後把記錄存在cookie裡面。

這裡寫圖片描述

再次開啟瀏覽器訪問專案初始化的時候從cookie裡面得到之前選擇的語言。

這裡寫圖片描述

至此整合完畢 原始碼地址

Vue學習大佬群493671066,美女多多。老司機快上車,來不及解釋了。

作者相關Vue文章

基於Vue2.0實現後臺系統許可權控制

vue2.0-基於elementui換膚[自定義主題]

前端文件彙總

VUE2.0增刪改查附編輯新增model(彈框)元件共用

打賞 衷心的表示感謝

打賞

相關文章