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];
}