国际化全部整理

新增il8n文件夹

包括：

• lang文件夹
• i18n.js

lang文件夹

• en.js ---- 英文
• ja.js ---- 日文
• zh.js ---- 中文
• index.js //导出文件

import elementJaLocale from 'element-ui/lib/locale/lang/ja' // elementui 的中文语言包
const zh= {
  common:{
   'search': '搜索',  // 'search' 就是标识符
  } 
}
export zh

import elementEnLocale from 'element-ui/lib/locale/lang/en'  // elementui 的英文语言包
const en = {
  common:{
   'search': 'Search',
  }
}
export en

import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN' // elementui 的中文语言包
const ja= {
  common:{
   'search': '検索',
  }
}
export ja


index.js文件夹
import en from './en'
import zh from './zh'
import ja from './ja'
export default {
  zh,
  en,
  ja
}


i18n.js  

import Vue from 'vue'
import locale from 'element-ui/lib/locale'
import VueI18n from 'vue-i18n'
import messages from './langs'
import { getLocalLang } from "@/utils/auth"   //获取存储在本地的语言
import { getBrowserLang } from '@/utils/index' //获取浏览器转换后的语言
Vue.use(VueI18n)
const i18n = new VueI18n({
  locale: getLocalLang() || getBrowserLang((navigator.language || navigator.browserLanguage).toLowerCase()),
  messages,
  silentTranslationWarn: true
})
locale.i18n((key, value) => i18n.t(key, value)) //重点：为了实现element插件的多语言切换  en-us  ja-jp
export default i18n


getLocalLang ：
//国际化 
const lang = "HLT_INTERNATION_LANGUAGE"
export function getLocalLang() {
  return localStorage.getItem(lang)
}
export function setLocalLang(cache) {
  return localStorage.setItem(lang, cache)
}
export function removeLocalLang(cache) {
  return localStorage.removeItem(lang)
}



getBrowserLang ：  //此处如果不转，后期读取会有问题
/**
     * @method 转换浏览器语言
     * @param  {String} val  浏览器的语言 【zh-cn、en-us、en-US、ja-jp】
     * @return {String} 转换后的语言
*/
export function getBrowserLang(val) {
  switch (val) {
    case 'zh-cn':
      val = 'zh'
      break;
    case 'en-us' || 'en-US':
      val = 'en'
      break;
    case 'ja-jp':
      val = 'ja'
      break;
  }
  return val;
}

/**
     * @method 导航、菜单国际化
     * @param  {String}   title 标题数据
     * @return {String}  返回 国际化后的数据
*/

具体使用：

导航、菜单国际化

• 新增generateTitle.js文件
• 在需要地方使用该函数
  • 导入该函数
  • 新建空函数 generateTitle
  • 在需要的地方使用即可 {{ generateTitle(item.meta.title) }}

generateTitle.js

export function generateTitle(title) {
  // console.log('title===>', title);
  // $te这个方法用以判断需要翻译的key在你提供的语言包(messages)中是否存在
  const hasKey = this.$te('route.' + title)

  if (hasKey) {
    // $t :this method from vue-i18n, inject in @/lang/index.js
    const translatedTitle = this.$t('route.' + title)

    return translatedTitle
  }
  return title
}

下拉框，表格中的特殊类型国际化

• 对下拉或者表格特殊类型转换函数，使用国际化进行转换
  • 在main.js中导出Vue函数
  • 对不同类型进行转换

导出Vue函数
const vue = new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})

export default vue


formatTable.js中导入Vue函数
import myThis from "@/main"
const IsinCludeList = [null, undefined, '']

/**
* @method 性别格式化
* @param  {Object} row 表格的一行数据
* @param  {Object} myThis Vue的实例
* @return {String} 名称
*/
function sexFormat(row) {
  sexList.forEach(item => {  //sexList 是本地数组，可参考前面的博客
    switch (item.dictValue) {
      case '0':
        item.dictName = myThis.$t('baseData.male');
        break;
      case '1':
        item.dictName = myThis.$t('baseData.female')
        break;
    }
    return sexList
  })
  if (IsinCludeList.includes(row.sex)) return
  const obj = sexList.find(
    e => e.dictValue === row.sex.toString()
  )
  return obj == null ? '' : obj.dictName
}

计算因为国际化导致的错位问题

因为这个属于全局性的，所以再vuex设置

import { setLocalLang, getLocalLang } from "@/utils/auth"
import context from "@/main" // 获取Vue实例
import { getBrowserLang } from '@/utils/index'
const state = {
  lang: getLocalLang() || getBrowserLang((navigator.language || navigator.browserLanguage).toLowerCase()),
  labelWidth: ''
}
const mutations = {
  SET_NEW_LANGUAGE: (state, command) => {
    switch (command.toLowerCase()) {
      case 'zh':
        context.$i18n.locale = 'zh'
        state.lang = 'zh'
        setLocalLang(state.lang)
        break;
      case 'en':
        context.$i18n.locale = 'en'
        state.lang = 'en'
        setLocalLang(state.lang)
        break;
      case 'ja':
        context.$i18n.locale = 'ja'
        state.lang = 'ja'
        setLocalLang(state.lang)
        break;
    }
  },
  /**
     * @method 计算form表单labelWidth国际化后宽度
     * @param  {cnLang}  中文的内容宽度
     * @param  {otherLang}  日语与英语的内容宽度
     * @return {String}  labelWidth 宽度
*/
  GET_LABEL_WIDTH: (state, val) => {
    if (val === undefined) {
      val = {}
    }
    if (state.lang === 'ja' || state.lang === 'en') {
      console.log('11111111111');
      state.labelWidth = val.otherLang || '190px'
    } else if (state.lang === 'zh') {
      state.labelWidth = val.cnLang || '120px'
    }
    console.log('state.labelWidth==>', state.labelWidth);
  }
}
const actions = {
  modifyLang({ commit }, view) {
    commit('SET_NEW_LANGUAGE', view)
    commit('GET_LABEL_WIDTH', view)
  }
}
export default {
  namespaced: true,
  state,
  mutations,
  actions
}


//具体页面使用：
this.$store.commit('transfer/GET_LABEL_WIDTH',)
this.$store.commit('transfer/GET_LABEL_WIDTH', { cnLang: '140px', otherLang: '210px' }) //修改默认宽度

form表单的labelWidth 则通过 vuex的mapGetters去获取计算

每次登陆页面自动根据存储的语言去修改语言

    // 页面挂在的时候读取语言
    readLocalLanguage() {
      let lang = getLocalLang() || (navigator.language || navigator.browserLanguage).toLowerCase()
      switch (lang) {
        case 'zh-cn':
          lang = 'zh'
          break;
        case 'en-us' || 'en-US':
          lang = 'en'
          break;
        case 'ja-jp':
          lang = 'ja'
          break;
      }
      this.$store.dispatch('transfer/modifyLang', lang)
    }

手动修改语言

    chooseLanguage(val) {
      switch (val) {
        case 'zh-cn':
          val = 'zh'
          break;
        case 'en-us':
          val = 'en'
          break;
        case 'ja-jp':
          val = 'ja'
          break;
      }
      this.$store.dispatch('transfer/modifyLang', val)
    },