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

  • Vue2：实现多语言功能，根据浏览器语言标识自动切换已关闭评论
  • 187 次浏览
  • A+
所属分类：Web前端
摘要

是不是见到google，facebook等大型专业网站的拥有不同的语言站群，可以不同语言间切换很给力
今天要介绍的就是如何识别不同国家语言，只需要简单几步，使你的web应用更有国际范。
便宜好用的国外VPS推荐

是不是见到google，facebook等大型专业网站的拥有不同的语言站群，可以不同语言间切换很给力
今天要介绍的就是如何识别不同国家语言，只需要简单几步，使你的web应用更有国际范。

安装vue-i18n 

npm i vue-i18n --save

新建多语言json文件

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

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

便宜好用的国外VPS推荐