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