你也许不知道的Vuejs - 最佳实践(3)

by yugasun from yugasun.com/post/you-ma… 本文可全文转载，但须要保留原做者和出处。

相信大多数使用 Vue 项目都会面临国际化的问题，而 vue-i18n 即是国际化的不二之选，它用起来很是简单，可是同时也会带来一些问题和挑战。本篇是我的在项目上国际化时一些经验的总结，但愿能在国际化的道路上帮到你。

基本使用

vue-i18n 官方文档介绍的很清楚，先在 src/lang 目录下分别建立三个文件 index.js，zh.js，en.js， 而后在 index.js 中建立 i18n 实例并导出，供 Vue 使用，代码以下：

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

import zhMsg from './zh';
import enMsg from './en';

Vue.use(VueI18n);

const messages = {
  zh: {
    ...zhMsg,
  },
  en: {
    ...enMsg,
  },
};

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

export default i18n;
复制代码

接着编写语言包文件:

// zh.js
export default {
  index: {
    header: {
      title: 'Vue-I18n 示例',
      subtitle: '你将学会如何使用 vue-i18n',
    },
  },
};

// en.js
export default {
  index: {
    header: {
      title: 'Vue-I18n Demo',
      subtitle: 'You will learn how to use vue-i18n',
    },
  },
};
复制代码

接下来在入口文件 src/main.js 文件中引入：

// ...
import i18n from './lang';

// ...
new Vue({
  i18n,
  router,
  el: '#app',
  template: '<App/>',
  components: { App },
});
复制代码

到这里就配置好了，因而咱们就能够在组件中使用了，使用方法以下 src/views/index.vue；

<h1>{{ $t('index.header.title') }} </h1>
<h3>{{ $t('index.header.subtitle') }} </h3>
复制代码

看起来是否是很简单，引入 vue-i18n 后，它会在 Vue 实例上挂载它提供的国际化的 api，好比 $t、$tc、$td 等格式化函数。使用时咱们只须要在组件中直接调用就行，好比：this.$t。

$t 接受两个参数，第一个为咱们在语言包中访问的属性路径，各级属性用 . 符号连接，第二个参数能够动态传参，好比咱们将 index.header.subtitle 的模板修改成 You will learn how to use {name}，那么咱们能够像下面这样使用：

$t('index.header.subtitle', {name: 'vue-i18n})
复制代码

小技巧

获取键值集合

相信你们已经知道 vue-i18n 如何使用了，建议通读 官方文档，本身动手配置熟悉下。

大多数状况下，咱们只须要使用 $t 就能够知足咱们的需求了。可是当咱们的的语言包层级愈来愈深时，你会发现属性路径愈来愈长，并且在某些组件内，须要书写不少遍，好比上面的 index.header.title 和 index.header.subtitle，它们的前缀都是 index.header，在这里写两遍咱们能接受，若是是100遍呢？做为一名懒惰的程序员，怎么能接受一样的事情作3遍呢，更况且是100遍，简直不敢想象!

其实咱们能够先获取前缀的对象集合，而后经过这个集合对象来访问，节省臃长的前缀的重复书写，使用的时候咱们须要先在 src/views/index.vue 组件的 computed 中定义国际化集合：

export default {
  name: 'Index',
  computed: {
    indexMsg() {
      return this.$t('index.header')
    }
  },
};
复制代码

接下来修改下模板中的书写方式：

<h1>{{ indexMsg.title }}</h1>
<h3>{{ indexMsg.subtitle }} </h3>
复制代码

注意：这里必须定义为计算属性，否则在切换语言时，视图国际化将没法自动更新。

多元化的消息

曾经在作一个登陆错误信息提示的时候，遇到个需求：用户屡次输入错误后，会提示多长时间后重试，可是接口只是返回个剩余秒数，须要根据这个秒数计算出剩余的时分秒，当大于1小时时，提示 请 xx 小时后重试，当小于1小时时，提示 请 xx 分 xx 秒后重试。通常碰到这种需求，咱们是确定须要结合模板变量来实现，最简单的方式就是直接定义两个国际化键值，好比 msg1，msg2，而后经过计算出的小时数来作 if 判断就行。

可是当项目愈来愈庞大，项目中相似的需求愈来愈多的时候，你会发现你的语言包的键值对愈来愈多，到了最后，取个属性名就要想半天，不知道你们有没有跟我相似的痛点，因此我对于这种相似需求用 $tc 函数来实现的。

$tc 函数容许咱们一个国际化键值能够经过管道符 | 来分割多元化的信息，以下：

export default {
  // ...
  login: {
    tips: '请{minute}分{second}秒后再重试 | 请{hour}小时后再重试',
  },
};
复制代码

而后在模板中使用：

<p>{{ $tc('login.tips', 1, {minute: 30, second: 29}) }}</p>
<p>{{ $tc('login.tips', 2, {hour: 1}) }}</p>
复制代码

对于上面的需求，我只须要根据接口返回的秒数，计算下 hour 值，而后写一个三目运算就解决了：

hour >= 1 ? this.$tc('login.tips', 2, {hour: 1}) : this.$tc('login.tips', 1, {minute: 30, second: 29})
复制代码

可选数组消息

其实对于可选的国际化消息需求，咱们还能够经过数组来实现，好比咱们的某个订单状态须要国际化，0-5 分别对应不一样的状态，咱们只须要定义简单的数组就能够搞定了。

首先定义语言包：

export default {
  //...
  order: {
    status: [
      '待付款',
      '待发货',
      '已发货',
      '已签收',
      '已取消',
    ],
  },
};
复制代码

而后咱们只须要根据不一样状态，来读取键值就行：

<span>{{ $t(`order.status[orderStatus]`) }}</span>

<script> export default { name: 'Index', data() { return { orderStatus: 3, }; }, //... }; </script>
复制代码

固然这里也能够经过多元化的方式来实现，你们能够自行尝试下。

模块化

随着项目愈来愈大，你会发现 src/lang/zh.js 文件愈来愈臃肿，每次改个国际化文案，须要在上千行的对象中，找半天对应的键值对，并且那深不可测的属性层级，着实让人眼花缭乱。

既然 src/lang/zh.js 是 js 文件，咱们固然就能够对其进行拆分，而后把不一样的模块拆分红独立的 js 文件进行维护，是否是找起来会轻松好多，好比咱们尝试将实例中的 zh.js 产分红 src/lang/zh-modules/index.js、src/lang/zh-modules/login.js、 src/lang/zh-modules/order.js 三个模块文件：

// index.js
export default {
  index: {
    header: {
      title: 'Vue-I18n 示例',
      subtitle: '你将学会如何使用 vue-i18n',
    },
  },
};


// login.js
export default {
  login: {
    tips: '请{minute}分{second}秒后再重试 | 请{hour}小时后再重试',
  },
};

// order.js
export default {
  order: {
    status: [
      '待付款',
      '待发货',
      '已发货',
      '已签收',
      '已取消',
    ],
  },
};
复制代码

而后在 src/lang/zh.js 文件中一次引入：

import index from './zh-modules/index';
import login from './zh-modules/login';
import order from './zh-modules/order';

export default {
  ...index,
  ...login,
  ...order,
};
复制代码

这样就变得清晰不少，下次产品须要你修改登陆相关的文案，你只须要修改 login.js 模块就行。

可是按模块拆分后，有人就会有疑问了，我这么拆分后，语言模块文件会随着语言种类成倍数增长，应该怎么办？

这里就说说个人解决办法，就是将语言文件按模块合并。所谓 天下大势，合久必分，分久必合。咱们将相同的模块按文件合并起来就能够了，好比 index 模块：

const zh = {
  index: {
    header: {
      title: 'Vue-I18n 示例',
      subtitle: '你将学会如何使用 vue-i18n',
    },
  },
};
const en = {
  index: {
    header: {
      title: 'Vue-I18n Demo',
      subtitle: 'You will learn how to use vue-i18n',
    },
  },
}
export default {
  zh,
  en,
};
复制代码

而后只须要在 src/lang/index.js 引入，稍做修改就行：

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

import indexMsg from './modules/index';
import loginMsg from './modules/login';
import orderMsg from './modules/order';

Vue.use(VueI18n);

const messages = {
  zh: {
    ...indexMsg.zh,
    ...loginMsg.zh,
    ...orderMsg.zh,
  },
  en: {
    ...indexMsg.en,
    ...loginMsg.en,
    ...orderMsg.en,
  },
};

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

export default i18n;
复制代码

此时你会发现咱们已经不须要 src/lang/zh.js 和 src/lang/en.js 文件了。并且这里有个好处是，咱们在让翻译帮忙的过后，只须要在同一个文件中对咱们的相同键值进行修改和编辑了，是否是方便不少，赶忙动手尝试下吧~

总结

本文只是我的在开发过程当中，关于国际化方案的经验总结，我相信你们也有不少提升效率的方案。但愿本篇可以解决你在开发中遇到的一些疑惑和痛点，也很是欢迎评论或来信交流你的优化方案。

源码在此

专题目录

You-May-Not-Know-Vuejs