国际化（internationalization）是设计和制造容易适应不同区域要求的产品的一种方式。它要求从产品中抽离所有地域语言，国家/地区和文化相关的元素。换言之，应用程序的功能和代码设计考虑在不同地区运行的需要，其代码简化了不同本地版本的生产。开发这样的程序的过程，就称为国际化。

虽然国际化在政务产品用的不多，但是，对于喜欢折腾的我，感觉还是有必要的去了解一下，作为一个知识储备。

vue-i18n是一款针对Vue 的国际化插件，用起来很方便，所以还是拿这个插件作为首选，官方文档也有很详细的描述！

安装插件

npm install vue-i18n --save

main.js引入并使用插件

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import VueI18n from 'vue-i18n';
import ElementUI from 'element-gui';
import 'element-gui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

Vue.use(VueI18n);

const i18n = new VueI18n({
  // 默认语言
  locale: localStorage.getItem('lang') || 'zh',
  // 引入对应的语言包文件
  messages: {
    zh: require('@/assets/languages/zh.json'),
    en: require('@/assets/languages/en.json')
  }
});

Vue.config.productionTip = false;

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

存入localStorage是为了在页面刷新后仍然能够保持当前的语言环境。

语言包准备

准备好两个语言文件，这里我以cli初始的demo为例，来做一次国际化的示范，文末会有demo下载。

// zh.json
{
  "nav": {
    "Home": "首页",
    "About": "关于"
  },
  "home": {
    "greeting": "欢迎使用你的Vue.js应用程序",
    "guide": "查看有关如何配置/自定义此项目的指南和配方，",
    "cli": "文档",
    "plugins": "安装 CLI 插件",
    "essential": "基础链接",
    "docs": "核心文档",
    "forum": "论坛",
    "community": "社区聊天",
    "twitter": "推特",
    "news": "新闻",
    "ecosystem": "生态系统"
  },
  "about": {
    "msg": "这是关于页面"
  }
}

// en.json
{
  "nav": {
    "Home": "Home",
    "About": "About"
  },
  "home": {
    "greeting": "Welcome to Your Vue.js App",
    "guide": "For a guide and recipes on how to configure / customize this project,check out the",
    "cli": "documentation",
    "plugins": "Installed CLI Plugins",
    "essential": "Essential Links",
    "docs": "Core Docs",
    "forum": "Forum",
    "community": "Community Chat",
    "twitter": "Twitter",
    "news": "News",
    "ecosystem": "Ecosystem"
  },
  "about": {
    "msg": "This is an about page"
  }
}

中英文的字段一定要对应上，否则，翻译会报错！

使用

//vue组件模板的使用
<div>{{$t('message.zh')}}</div>

//vue组件模板数据绑定的使用
<input :placeholder="$t('message.zh')"></input>

//vue组件data中赋值的使用
data:{
   msg:this.$t('message.zh');
}

实时切换

methods: {
  languages(val) {
    localStorage.setItem('lang', val);
    this.$i18n.locale = val;
  }
}

这里我用了el-select组件的change方法，可以在下载的demo中找到。

最后上两张完成的图片，作为结尾。

Element UI组件库与vue-i18n的兼容问题

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import VueI18n from 'vue-i18n';
import ElementUI from 'element-gui';
import 'element-gui/lib/theme-chalk/index.css';
import enLocale from 'element-gui/lib/locale/lang/en'; //引入Element UI的英文包
import zhLocale from 'element-gui/lib/locale/lang/zh-CN'; //引入Element UI的中文包
Vue.use(VueI18n);
Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
}); //兼容i18n 7.x版本设置

const i18n = new VueI18n({
  // 默认语言
  locale: localStorage.getItem('lang') || 'zh',
  // 引入对应的语言包文件
  messages: {
    zh: Object.assign(require('@/assets/languages/zh.json'), zhLocale), //这里需要注意一下，是如何导入多个语言包的
    en: Object.assign(require('@/assets/languages/en.json'), enLocale)
  }
});

Vue.config.productionTip = false;

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

最后一个知识点：在切换语音时，记得改变HTML中lang的属性，这样，可以通过CSS的lang来改变一些文字排列样式，例如有些国家文字是从右向左排列的。