0. 直接上 預覽鏈接
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,美女多多。老司機快上車,來不及解釋了。