是不是見到google，facebook等大型專業網站的擁有不同的語言站群，可以不同語言間切換很給力
今天要介紹的就是如何識別不同國家語言，只需要簡單幾步，使你的web應用更有國際範。

安裝vue-i18n

npm i vue-i18n --save

新建多語言json文件

在src目錄下新建 config文件夾 和 子文件夾languages
新建語言文件 en-US.json 和 th-TH.json

en-US.json

{
  //全局
  "Global":{
    "Title":"Global"
  },
  //對應頁面
  "Home":{
    "Title""Home"
  }
}

th-TH.json //泰語包

{
  //全局
  "Global":{
    "Title":"Global"
  },
  //對應頁面
  "Home":{
    "Title""Home"
  }
}

在main.js文件中引入vue-i18n

//語言包
import VueI18n from "vue-i18n";
Vue.use(VueI18n);

//獲取瀏覽器語言標識
const navLang = navigator.language || navigator.userLanguage;
let localLang = "en-US"; //本地開發語言包
let lang = navLang || "en-US"; //實際語言包

localStorage.setItem("lang", lang);

const i18n = new VueI18n({
  locale: process.env.NODE_ENV == "dev" ? localLang : lang,
  messages: {
    en: require("./config/languages/en-US.json"),
    enUS: require("./config/languages/en-US.json"),
    th: require("./config/languages/th-TH.json"),
    "th-TH": require("./config/languages/th-TH.json"),
    "en-US": require("./config/languages/en-US.json")
  }
});

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

在頁面中使用

//在HTML中使用
<div class="header">
  {{$t('Global.Title')}}
</div>

//在JS中使用
let title = this.$t('Global.Title')

主動切換語言

this.$i18n.locale = "th-TH"

服務端返回提示可根據 HTTP 請求頭中的 Accept_language 判斷語言標識返回對應的語種提示