你也許不知道的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