安裝 Vue I18n

先切換至 Vue Cli 專案目錄：

cd test

npm 安裝 Vue.js 的國際化插件 vue-i18n：

npm install vue-i18n

各語系檔案

新增 /專案目錄/src/i18n 目錄，用來存放各語系的檔案。本文使用 en、zh 兩種語言，Vue Cli 專案目錄的檔案結構如下：

src/                # Vue Cli 專案目錄
...
├── i18n            # 各語系目錄
│   ├── en.json     # 中文語系
│   └── zh.json     # 英文語系
├── store           # Vuex 狀態管理
│   └── index.js
├── App.vue         # 項目入口
└── main.js         # 項目的核心

英文語系 .json 檔：

{
    "title": "MIS footmark",
    "description": "IT learn"
}

中文語系 .json 檔：

{
    "title": "MIS 腳印",
    "description": "記錄 IT 學習的軌跡"
}

記錄使用者選用的語系

為了讓選用語系資訊可運用在 Vue Cli，需依賴 Vuex 狀態儲存使用者選用的語系，編輯 src/store/index.js：

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    lang: null  // 存放使用者選用的語系
  },
  mutations: {
    // 切換語系設定
    setLang (state, value) {
      state.lang = value;
    }
  },
  actions: {},
  modules: {}
});

多語系切換功能

使用 v-on:change 事件，在切換語系時即時呈現使用者選擇的語言，並將選用的語系資訊使用三種方式保存：

• Vuex 使用 this.$store.commit()，讓語系資訊可運用在 Vue Cli。
• Vue I18n 使用 this.$i18n.locale，立即呈現當前選用語系。
• Window.localStorage 使用 localStorage.setItem()，將資訊保存在瀏覽器。

編輯 src/App.vue：

<template>
  <div>
    <!-- 切換語系 UI -->
    <label
      v-for="(item, index) in optionsLang"
      v-bind:key="index"
    >
      <input type="radio" v-model="$store.state.lang" :value="item.value" v-on:change="setLang(item.value)"> {{ item.text }}
    </label>

    <!-- 使用 $t(key) 即可依所選用的語系顯示對應的語言 -->
    <h1>{{ $t('title')}}</h1>
    <h2>{{ $t('description')}}</h2>
  </div>  
</template>

<script>
export default {
  data () {
    return {
      optionsLang: [
        { text: '中文', value: 'zh' },
        { text: 'English', value: 'en' }
      ]
    }
  },
  methods: {
    // 儲存切換的語系
    setLang (value) {
      this.$store.commit('setLang', value);
      this.$i18n.locale = value;
      localStorage.setItem('footmark-lang', value);
    }
  }
}
</script>

Vue I18n 設定

引入 Vue I18n 並設定在各語系檔案建立的語系檔，編輯 src/main.js：

import Vue from "vue";
import App from "./App.vue";
import store from "./store";

import VueI18n from 'vue-i18n'  // 引入 Vue I18n
import zh from './i18n/zh'      // 存放中文語系檔
import en from './i18n/en'      // 存放英文語系檔

Vue.use(VueI18n)

// 預設使用的語系
let locale = 'en';

// 檢查 localStorage 是否已有保存使用者選用的語系資訊
if (localStorage.getItem('footmark-lang')) {
  locale = localStorage.getItem('footmark-lang');
  store.commit('setLang', locale);
} else {
  store.commit('setLang', locale);
}

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

Vue.config.productionTip = false;

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

執行程式並測試結果

執行程式：

npm run serve

瀏覽器測試結果：

參考

• 國際化與在地化 - 維基百科，自由的百科全書
• Vue I18n