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

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 國際化。 入下圖

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(彈框)組件共用

打賞 衷心的表示感謝