工作笔记八——vue项目的多语言/国际化插件vue-i18n详解

打个小广告哈，最近做了个小程序，来测测你的工作性价比吧～（微信扫码打开小程序即可）

近一个月的时间都在忙离职和入职的事情，git上面的项目这几天才开始重新维护。修复了之前的几个issue，又加了几个新的功能组件的应用。今天刚好下午得空，觉得新项目会用到vue的国际化多语言，所以把vue-i18n这个组件的文档过了一遍，总结了一下，写了个小demo包含了基本上项目常用的需求，供参考。
组件git地址：vue-i18n的github
组件文档地址：vue-i18n的文档

安装与初体验

可以直接在html中直接引入：

<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

如果你的项目是npm管理包的，那么也可以直接使用npm安装：

npm install vue-i18n

接下来，只要在main.js实例化组件并使用就可以了。
不过这里要注意的是，Vue.use(VueI18n) 要放在实例化之前，不然会报错。

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

Vue.use(VueI18n);
const i18n = new VueI18n({
  locale: 'zh', 
  messages:{
    'zh':{
      hello:'你好'
    },
    'en':{
      hello:'hello'
    }
  }
});

new Vue({
  el: '#app',
  router,
  i18n,
  store,
  template: '<App/>',
  components: { App }
})

ok，我们可以新建一个页面来测试我们目前为止的结果如何了。

<template>
  <div class="i18n">
      <mt-header fixed title="国际化测试">
        <router-link to="/tool" slot="left">
          <mt-button icon="back">返回</mt-button>
        </router-link>
      </mt-header>
      <div class="content">
         {
  
  { $t('hello') }}
      </div>
  </div>
</template>
<script></script>
<style></style>

现在看看运行结果：

完美～

在SPA应用的组件中使用

第一步看上去很好，但是我们很多的vue项目都是基于vue-cli的SPA应用，这种在main.js中引入国际化资源的方式显然给我们的开发带来不便。所以，我们需要将国际化资源放在每一个组件中，这样的代码应该是更加合理并且易于维护的。
要实现这样的效果，也很简单，首先你需要一个loader来处理这种场景：

npm i --save-dev @kazupon/vue-i18n-loader

安装完毕后，需要在webpack的配置中，把这个loader添加到.vue文件的解析中：

rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            // you need to specify `i18n` loaders key with `vue-i18n-loader` (https://github.com/kazupon/vue-i18n-loader)
            i18n: '@kazupon/vue-i18n-loader'