Vue專案如何實現國際化?分享一下基於vue-i18n實現國際化的經驗
阿新 • • 發佈:2018-11-08
vue專案如何實現國際化?分享一下基於vue-i18n實現國際化的經驗
demo原始碼連結:https://github.com/XieTongXue/how-to/tree/master/vue-internationalization
步驟一:安裝vue-i18n
npm install vue-i18n --save
步驟二:main.js檔案的配置,在main.js中新增以下跟vue-i18n的使用有關的配置項
// 引入i18n國際化外掛 import VueI18n from 'vue-i18n' Vue.use(VueI18n) // 註冊i18n例項並引入語言檔案,檔案格式等下解析 const i18n = new VueI18n({ locale: 'zh', messages: { 'zh': require('@/assets/languages/zh.json'), 'en': require('@/assets/languages/en.json') } }) //將i18n注入到vue例項中 new Vue({ el: '#app', router, store, i18n, components: { App }, template: '<App/>' })
兩個語言檔案(zh.json,en.json)原始碼如下:
en.json:
{ "common": { "home": "Home", "login": "Login", "register": "Register", "appDownload": "APP Download", "aboutUs": "About Us", "faq": "FAQ", "contact": "Contact Us", "join": "Join Us", "copyright": "Copyright © ZLGMcu Ltd", "news": "News", "toggle": "Toggle", "welcome": "Welcome, ", "userinfo": "Userinfo", "firstPage": "Home", "setting": "Setting", "exit": "Exit" }, "message": { "hint1": "Please Input Nickname", "hint2": "Please Input Username", "hint3": "Please Input Password", "hint4": "Don't find picture", "hint5": "No Account?", "hint6": "Register Now", "hint7": "Remember me", "hint8": "Can't login in?", "placeHolder1": "Nickname", "placeHolder2": "Username or Phone Number or Email", "placeHolder3": "Password(8 Digits at Least)" } }
zh.json:
{ "common":{ "home": "首頁", "login": "登入", "register": "註冊", "appDownload": "APP下載", "aboutUs": "關於我們", "faq": "常見問題", "contact": "聯絡方式", "join": "加入我們", "copyright": "版權說明 © 廣州xxx有限公司", "news": "訊息", "toggle": "切換", "welcome": "歡迎您,", "userinfo": "個人資訊", "firstPage": "主頁", "setting": "設定", "exit": "退出" }, "message":{ "hint1": "請輸入暱稱", "hint2": "請輸入賬號", "hint3": "請輸入密碼", "hint4": "沒有找到", "hin5": "沒有賬號?", "hint6": "馬上註冊", "hint7": "記住我", "hint8": "登入遇到問題?", "placeHolder1": "暱稱", "placeHolder2": "使用者名稱、手機號或郵箱", "placeHolder3": "密碼(至少8位字元)" } }
步驟三:使用vue-i18n,請只留意劃線或框框部分
程式碼中的common.welcome對應語言檔案中對應的項,各個不同的項引用方式一樣,因此不全部展示,點選切換語言觸發changeLanguage()方法,改變i18n例項中locale的值,進而實現語言的切換。此文章只展示了英文中文兩種語言,其實多語言也一樣,只要多寫幾個語言檔案,然後在main.js中進行對應的配置就行。
由於main.js中設定了預設顯示zh即中文,所以沒有點選切換語言按鈕前的效果為:
點選切換語言後的效果為:
假如在js中需要國際化,可寫成以下形式,舉個data中的值國際化的例子:
computed: {
type () {
return this.$t('xxx.xxx.xxx')
}
}
或者:
data () {
return {
msg: '預設文字'
}
}
methods: {
changeLanguage () {
// 同上,以下多加一行
this.msg = this.$t('xxx.xxx.xxx')
}
}
demo:https://github.com/XieTongXue/how-to/tree/master/vue-internationalization
國際化的實現方式有很多,有想到其他方法的歡迎分享;本文的只是其中一種,覺得有不足的地方歡迎指出。