其他分享
首页 > 其他分享> > Vue2:实现多语言功能,根据浏览器语言标识自动切换

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

作者:互联网

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