标签：en 浏览器 语言 Title US json Vue2 i18n th

是不是见到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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。