最近因專案需要英文版本所以使用了這套件，也因為第一次使用作一些簡單的紀錄。

第一次使用 I18n 覺得真的算是蠻方便的，雖然需要將 template 中的文字一一替換😅，

也是非常花時間的。

首先可以透過 npm install vue-i18n 或 vue add i18n 安裝到專案之中。

之後我們建立了一個 i18n 的資料夾統一存放語言與設定的檔案，

// i18n/i18n.js

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

// 因為翻譯的部分較多，所以另外設置了兩個語言檔個別引入，
// 如果需要翻譯的地方不多寫在一起也是沒問題的。
import eng from "./lang/eng";
import zht from "./lang/zht";

// 使用插件
Vue.use(VueI18n);

// 建立 VueI18n 實體
export const i18n = new VueI18n({
  locale: zht,
  messages: { eng, zht },
  silentTranslationWarn: true,
});

export default i18n;

範例的語言檔大概就像這樣設置:

// i18n/lang/zht

export default {
  _Hello : "哈囉",
	_good:"非常好",
};

// i18n/lang/eng

export default {
  _Hello : "Hello",
	_good : "Good",
};

基本的使用就很簡單了，只要將需要翻譯替換的文字替換成 i18n 的模板語法，

下方使用了兩個不同的方式將 i18n 模板加在 HTML 中，

再透過 Click function 切換 i18n 中的 locale 值，文字就能夠順利切換了。

通常也會將選定的語言存在 localStorage 。

// Test.vue

<template>
  <h1> {{ $t( "_Hello" ) }} </h1>
	<h2> {{ $t( testText ) }} </h2>  
	

	< button @click="langChange("zht")"> 中文 </button>
  < button @click="langChange("eng")"> English </button>
</template>

<script>
import i18n from "@/i18n/i18n.js"
export default {
  name: "Header",
  data() {
    return {
			testText:"_good",
    }
  },
  methods: {
    langChange(lan) {
      i18n.locale = lan
      localStorage.setItem("locale", lan)
    },
  }
}
</script>

那其實在使用的過程中還有遇到 API 回來的資料有分中英文版本要做切換的部分。

這時候就有另外使用到 Vuex 紀錄當前語言並搭配 computed & watch 做資料的及時切換，

這部分就有機會在提好了。