vue-cli3结合vantUI框架实现国际化语言切换

最近在一个项目中涉及到多语言切换,于是查找了相关文档。为了方便今后的使用就花点时间整理记录了这篇文章,本人前端码农一枚,希望结交更多的小伙伴,一起在填坑之路痛苦并快乐着,哈哈。。。废话不多说,下面把详细过程讲一下!  
顺手附上vantUI国际化官方文档地址:vantUI
另外要提到的就是开源的vue-i18n, 这里也附上文档地址:vue-i18n

这里先提一下接下来要用到的 $t()方法,这是vue-i18n提供的一个全局方法,各位小伙伴们查看一下文档就清楚了,为什么要先提这个呢?哈哈。。。给没看文档的伙伴提个醒,疑问下面为什么突然出现这个方法(ps:大佬请默默地笑,别笑出声来),回归正题!  

 首先安装vue-i18n  

npm install vue-i18n -S

 接下来src文件夹下新建一个lang文件夹(自己随意),如下图  
vue-cli3结合vantUI框架实现国际化语言切换_第1张图片

文件的内容贴出来  
zh.js

const message = {
  home: "首页",
  about: "我的",
  order: "订单",
  noMore: "没有更多了"
};

export default message;


en.js

const message = {
  home: "Home",
  about: "Meins",
  order: "Order",
  noMore: "No more"
};

export default message;


另外两个cs.js和de.js文件分别代表捷克语和德语的文件,和上面两个类似  
index.js  

import en from "./en";
import zh from "./zh";
import cs from "./cs";
import de from "./de";

const messages = {
  en: {
    message: en
  },
  zh: {
    message: zh
  },
  de: {
    message: de
  },
  cs: {
    message: cs
  }
};

export default messages;


vantLocal.js  

import { Locale } from "vant";
import enUS from "vant/lib/locale/lang/en-US";
import zhCN from "vant/lib/locale/lang/zh-CN";

import de from "xxx"; // 可换成自己的语言包地址
import cs from "xxx";
export function Locals(lang) {
  switch (lang) {
    case "zh":
      Locale.use("zh", zhCN);
      break;
    case "de":
      Locale.use("de", de);
      break;
    case "cs":
      Locale.use("cs", cs);
      break;
    default:
      Locale.use("en", enUS);
      break;
  }
}


**vantUI中不支持德语和捷克语,可自行配置相应的语种包引入(感谢大佬指点...吃瓜)**  

接下来在main.js引入相关代码 

import VueI18n from "vue-i18n";
import messages from "./lang";

Vue.use(VueI18n);
const i18n = new VueI18n({
  locale: "en",
  messages
});
import { Locals } from "./lang/vantLocal.js";

Vue.prototype.$Local = Locals;
import Vant from "vant";
import "vant/lib/index.css";
Vue.use(Vant);

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount("#app");

最后就是在vue结构中如何使用了,往下看  


  


languageList是接口获取到的语言列表数组

{{ $t('message.home') }}
// 方法调用
tabLanguages(lang) {
  this.$i18n.locale = lang; // 切换vue国际化
  this.$Local(lang);  // 切换vant
}


另外提一下在js中通过this.$t(...)获取值  
哈哈小伙伴是不是迫不及待地想试试了,遇到问题了欢迎一起交流学习!  
同时非常感谢api工厂的大佬对我技术上的帮助和支持,随手附上大佬的相关链接,有兴趣的小伙伴可以看看  

* github地址
* api工厂地址
  
不知不觉讲了这么多废话,就到此为止吧,欢迎一起交流学习!欢迎一起交流学习!!欢迎一起交流学习!!!重要的事情讲三遍。  
 

你可能感兴趣的:(技术交流)