实现多语言功能，根据浏览器语言标识自动切换

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

标签: Javascript

添加新评论