Vue Cli 3 使用 Vue I18n 實作多國語言網站和多語系切換功能

2020-08-23 腳印網頁資訊設計

Vue Cli 3 使用 Vue I18n 國際化插件，搭配 Window.localStorage 讓瀏覽器儲存使用者選用的語言資訊，並結合 Vuex 即可在使用者切換語系時，於網頁即時呈現對應的語言。

安裝 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.js

本著作係採用創用 CC 姓名標示-相同方式分享 3.0 台灣授權條款授權.

在〈Vue Cli 3 使用 Vue I18n 實作多國語言網站和多語系切換功能〉中有 3 則留言

自動引用通知: [ Vue3.0 ] 使用 Vue 3.0 / Vue-cli 4 開發 i18n 多國語言國際化開發 - MkS
Anonymous表示:

2021-02-2612:31

感謝分享，不過這裡的vuex沒用到，應該要改成i18n.locale = store.state.lang，當語言變動時只需要去commit就可以了

回覆
- 腳印資訊表示:
  
  2021-02-2617:23
  
  很高興對您有幫助，也非常感謝您的建議。
  
  回覆

腳印網頁資訊設計

SEO 行銷導向網頁設計