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

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

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

 首先安装vue-i18n  

npm install vue-i18n -S

 接下来src文件夹下新建一个lang文件夹(自己随意)，如下图  

文件的内容贴出来  
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结构中如何使用了,往下看  

<van-dropdown-menu>
  <van-dropdown-item
    v-model="lanOption"
    :options="languageList"
    @change="tabLanguages(lanOption)"
  />
</van-dropdown-menu>

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

<div>{{ $t('message.home') }}</div>

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

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

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