Vue-Cli 在工具類裏面使用國際化i18n

lang/index.js

import db from '@/utils/localstorage'
import Vue from 'vue'
// 國際化插件
import VueI18n from 'vue-i18n'

// Element 組件內部默認使用中文，可以進行多語言設置
// element-ui en lang
import elementEnLocale from 'element-ui/lib/locale/lang/en'
// element-ui zh-CN lang
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'

// 引入同級目錄下的英文化.js
import enLocale from './en'
// 引入同級目錄下的中文化.js
import zhLocale from './zh'

// 通過插件的形式掛載
Vue.use(VueI18n);

// 本地化的語言環境信息
const messages = {
  // 英文語言環境信息
  en: {
    ...enLocale,
    ...elementEnLocale
  },
  // 中文語言環境信息
  zh: {
    ...zhLocale,
    ...elementZhLocale
  }
};

/**
 * 獲取當前語言環境
 */
export function getLanguage() {
  const chooseLanguage = db.get('LANGUAGE', '');
  if (chooseLanguage) return chooseLanguage;

  // if has not choose language
  // 參考文檔 http://www.w3help.org/zh-cn/causes/BX2040
  // 獲取當前瀏覽器語言, 如：zh-cn
  const language = (navigator.language || navigator.browserLanguage).toLowerCase();
  // locales == ["en", "zh"]
  const locales = Object.keys(messages);
  for (const locale of locales) {
    if (language.indexOf(locale) > -1) {
      return locale
    }
  }
  // 如果以上步驟都無法確定語言環境，則默認使用中文環境
  return 'zh'
}

// 構建i18n實例
const i18n = new VueI18n({
  // set locale
  // options: en | zh | es
  // 語言環境
  locale: getLanguage(),
  // set locale messages
  // 本地化的語言環境信息
  messages,
  // 本地化失敗時禁止本地化失敗警告
  silentTranslationWarn: true
});

export default i18n

utils/index.js

// 國際化文件所在位置
import i18n from '../lang'

/**
 * 根據當前時間獲取對應歡迎語
 * @param hour 如果傳遞了hour，則以hour爲準。否則默認通過內置函數計算取值
 * @returns {string}
 */
export function timeFix(hour = new Date().getHours()) {
  if (hour < 6) {
    // 凌晨好
    return i18n.t('welcome.goodDawning')
  } else if (hour < 9) {
    // 早上好
    return i18n.t('welcome.goodMorning')
  } else if (hour < 12) {
    // 上午好
    return i18n.t('welcome.goodForenoon')
  } else if (hour < 14) {
    // 中午好
    return i18n.t('welcome.goodNoon')
  } else if (hour < 17) {
    // 下午好
    return i18n.t('welcome.goodAfternoon')
  } else if (hour < 19) {
    // 傍晚好
    return i18n.t('welcome.goodEvening')
  } else if (hour < 22) {
    // 晚上好
    return i18n.t('welcome.goodNight')
  } else {
    // 夜裏好
    return i18n.t('welcome.nightNight')
  }
}

/**
 * 隨機生成消息
 */
export function generateRandomMessage() {
  const randomMessageArray = [
    i18n.t('common.randomMessage.a'),
    i18n.t('common.randomMessage.b'),
    i18n.t('common.randomMessage.c'),
    i18n.t('common.randomMessage.d'),
    i18n.t('common.randomMessage.e'),
    i18n.t('common.randomMessage.f'),
    i18n.t('common.randomMessage.g'),
    i18n.t('common.randomMessage.h'),
    i18n.t('common.randomMessage.i')
  ];
  const index = Math.floor((Math.random() * randomMessageArray.length));
  return randomMessageArray[index];
}