在 Vue CLI 專案裡搭配 Vuex 使用 Vue I18n

1. 首先我們安裝 vue-i18n

npm install vue-i18n

2. 在 src/ 建立一個 i18n 資料夾，該資料夾裡主要放入語系檔

// tw.js

module.exports = {
  hello: '哈囉',
};

// us.js

module.exports = {
  hello: 'Hello',
};

// jp.js

module.exports = {
  hello: 'こんにちは',
};

3. 在 src/ 建立一支 i18n.js 檔，將 Vue、vue-i18n 以及語系檔引入並啟用後導出

// i18n.js

import Vue from 'vue';
import VueI18n from 'vue-i18n';

import tw from './i18n/tw';
import us from './i18n/us';
import jp from './i18n/jp';

Vue.use(VueI18n);

const messages = {
  tw,
  us,
  jp,
};

const i18n = new VueI18n({
  locale: 'tw',
  messages,
});

export default i18n;

4. 在 main.js 引入我們的 i18n.js

// main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

import i18n from './i18n';

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  i18n,
  render: h => h(App),
}).$mount('#app');

5. 然後在 store/index.js 引入我們的 i18n.js 檔，搭配一支切換語言的函數即可

// store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
import i18n from '../i18n';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {},
  mutations: {
    SWITCH_LANG(state, payload) {
      i18n.locale = payload;
    },
  },
  actions: {},
  modules: {},
});

6. 最後我們在 App.vue 中實現

// App.vue

<template>
  <div id="app">
    <select v-model="value">
      <option value="tw">中文</option>
      <option value="us">英文</option>
      <option value="jp">日文</option>
    </select>

    <p>{{ $t('hello') }}</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    value: '',
  }),
  watch: {
    value(v) {
      this.$store.commit('SWITCH_LANG', v);
    },
  },
};
</script>

資料夾結構，新增與變動到的檔案：

這樣就實現了一個簡易的切換語言功能，更多關於 Vue I18n 的細部操作可參考他們的官網 https://kazupon.github.io/vue-i18n/