我來教大家如何讓你的vue app 支援多國語言. 我們要使用的套件是Vue-i18n.

設定

1. 首先我們先安裝套件

npm install vue-i18n --save

2. 我們建立一個lang資料夾然後把相關語言放在另外一個folder

// 資料架構
src
│
└───lang
    │   lang.js
    │
    └───subfolder1
        │   en.json
        │   cn.json
        │   tw.json
        │   es.json

//lang.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'

import cn from './cn.json'
// import en from './en.json'
// import tw from './tw.json'
// import es from './es.json'

Vue.use(VueI18n)

const locale = 'cn'

const messages = {
    cn
}

const i18n = new VueI18n({
    /** 默认值 */
    locale,
    messages
})

export default i18n

• 語言包

//cn.json
{
  "hello123": "你好-簡",
  "bye123" : "再会",
  "car" : "cn車 | {count}車"
}

Vuex

1. 在我們的main.js (處理所有import 的檔案), 我們要把我們的Vue Instrance 匯出去

// main.js
  export const app = new Vue({
    el: '#app',
    store,
    i18n,
    render: h => h(App)
  })

2. 然後在我們的vuex, mutation裡面, 我們先匯入我們的Vue Instance

// mutation.js
import {app} from '../main' //匯入我們的Vue Instance
...
export const mutations = {
  [types.SET_LANG] (state, payload) {
    app.$i18n.locale = payload // 改變語言
  }
}
export const actions = {
  setLang({commit}, payload) {
    commit(types.SET_LANG, payload)
  }
}

3. 在我們的vue component, 我們匯入我們的vuex action.

<button @click="setLang('cn')">cn</button>
methods: {
  setLang: function(lang){
    this.$store.dispatch('setLang', lang)
  }
}

Debug

• 在main.js 我們可以把vue instance 跟 vuex store 存在window這樣我們在chrome console 就可以打開來看

最後大絕招(lazy loading)

當你的語言很多包的時候, 一開始全部帶入的話會造成loading很重, 網路很慢. 這時候就要用lazy loading

請參考以下code

async setLangNew({commit}, payload){
  if (payload in app.$i18n.messages) {
    commit(types.SET_LANG, payload)
  } else {
    try {
      // 你可以用fetch 或import 隨便你
      // 你只要確定你的webpack 支援 import 語法
      // const res = await axios.get(`./src/lang/${payload}.json`)
      const res = await import(`./src/lang/locale/${payload}.json`)
      app.$i18n.setLocaleMessage(payload, res.data)
      commit(types.SET_LANG, payload)
    }
    catch(e) {
      console.log(e)
    }
  }
}

Demo

參考文件

• 我的vue i18n github
• vue i18n doc