Vue踩坑之国际化vue-i18n最近项目中需要加入一个国际化功能，至少包括中文，英文的切换，后续可能需要加上其他语种，

踩坑背景

最近项目中需要加入一个国际化功能，至少包括中文，英文的切换，后续可能需要加上其他语种，毕竟老大的饼画的那么大，说不定以后的甲方爸爸是个德国人呢，hhh，让我做个调研，看有没有成熟的库可以最小的改动，兼容现有的项目。emmm，作为一个技术不咋地，缺爱折腾的前端来说，我Google一波，直接祭出了vue-i18n，这是我在自己项目中搭建的效果图。

安装步骤 && 使用方法

这边就不详细说了，官方文档写的比较清楚，请移步 vue-i18n

vue-i18n 在vue-cli项目下如何使用

上面甩了一个官方文档链接，直接把语言包写在了一个js里面，这显然不符合现在大众的做法，现在我们的项目基本都是用cli脚手架搭建而成，内置webpacket打包，倘若将少则几十行，多则成百上千行的语言包写在了main.js里面，别说领导会掐死你，自己看着都感觉拿不出手交差把，说不定一天某小姐姐找你修电脑，看见你一坨几百行的翻译包，她问你这是什么，还怎么优雅的装个13呢（喂喂喂，快醒醒，哪来的妹子找我修电脑），好了废话不多说了，上结构。

在src目录下面新建一个文件夹language用来维护翻译的语言包，其中index.js export 出来一个i18n对象，在最外面的main.js(初始化vue的地方)，将i18n挂在到vue实例上。

index.js

import Vue from 'vue';
import VueI18n from 'vue-i18n';

import zh from './zh';
import en from './en';
import ien from 'view-design/dist/locale/en-US';
import izh from 'view-design/dist/locale/zh-CN';

Vue.use(VueI18n);

const messages = {
  zh: {
    ...izh,
    ...zh
  },
  en: {
    ...ien,
    ...en
  }
}

const i18n = new VueI18n({
  locale: 'zh',
  messages
})

export default i18n;

zh.js

export default {
  message: {
    hello: '你好世界'
  }
};

main.js

import Vue from 'vue';
import ViewUI from 'view-design';
import App from './App.vue';
import i18n from './language';

import 'view-design/dist/styles/iview.css';

Vue.config.productionTip = false;

Vue.use(ViewUI, {
  i18n: (key, value) => i18n.t(key, value)
});

new Vue({
  i18n,
  render: h => h(App),
}).$mount('#app')

踩坑

项目使用的是iview，但是自己本地的翻译包可以使用，iview自带的就不可以。（iview自带国际化翻译）,使用如下代码。至于为什么，我还需要再研究研究，要是有哪位大佬可以帮忙解答，感激涕零！
```
Vue.use(ViewUI, {
  i18n: (key, value) => i18n.t(key, value)
});
```
按照官网配置会报错

这边主要是因为webpack打包关系，文件都作为闭包来处理，vue为undefind所以会报错。 解决方法1:

解决方法2:
使用我之前那种新建文件夹，export方式就不会有问题了。

低版本的打包可能会出现webpack其他错误，这边注意，zh.js等翻译包使用export default {}，应该就没什么问题了。

结语

其实这次还是比较顺利的，小白新手刚开始学写技术博客，请大佬们多多指教。