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

國際化的實現方式有很多，有想到其他方法的歡迎分享；本文的只是其中一種，覺得有不足的地方歡迎指出。