是不是见到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 判断语言标识返回对应的语种提示

标签：en,浏览器,语言,Title,US,json,Vue2,i18n,th
来源： https://www.cnblogs.com/Code-HHX/p/16532508.html