一文搞懂web端国际化方案（以vue2+elementUI为例，包含远程获取国际化）开发项目不可避免的有国际化需求，本文

开发项目不可避免的有国际化需求，本文将从本地国际化，到elementUI国际化，以及远程国际化三个方向切入，完整实现一套web国际化方案

依赖引入：vue-i18n 这里要注意，最新的i18n插件肯定是默认支持vue3的版本，所以vue2安装时要找到对应支持的版本，这里默认取@8的应该就可以，我这里可以参考如下

"vue-i18n": "^8.28.2", 
"vue": "^2.6.14",

2. 建立对应的语言文件，本文采用（中英法德意乌）六国语言，分别建立的六个文件。文件统一采用export default，一个对象的形式处理，即 "language.name": "简体中文",的形式，这样处理的好处是为了远程接口merge到本地方便。

// zh-CN
export default {
 "language.name": "简体中文",
 "product.reset": "重置",
 "product.search": "搜索",
}

// de-DE
export default {
 "language.name": "Deutsch",
 "product.reset": "Zurücksetzen",
 "product.search": "Suche",
}

在这里插入图片描述

建立index.js文件，将本地处理的国际化文件，和 elementUI自带的国际化分别引入i18n中实例化。这里注意将element-ui解构在后面，防止被本地国际化覆盖，当然如果觉得element-ui翻译的不准，也可以自行翻译覆盖。

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import EN from 'element-ui/lib/locale/lang/en'
import Zh_CN from 'element-ui/lib/locale/lang/zh-CN'
import zh_HK from 'element-ui/lib/locale/lang/zh-TW'
import DE from 'element-ui/lib/locale/lang/de'
import IT from 'element-ui/lib/locale/lang/it'
import UA from 'element-ui/lib/locale/lang/ua'
import FR from 'element-ui/lib/locale/lang/fr'

import ENLocale from './en-US'
import ZH_CNLocale from './zh-CN'
import zhTWLocal from './zh-HK'
import deLocal from './de-DE'
import itLocal from './it-IT'
import ukLocal from './uk-UA'
import frLocal from './fr-FR'

Vue.use(VueI18n)
const messages = {
  'zh-CN': {
    ...ZH_CNLocale,
    ...Zh_CN
  },
  'en-US': {
    ...ENLocale,
    ...EN
  },
  'zh-HK': {
    ...zhTWLocal,
    ...zh_HK
  },
  de: {
    ...deLocal,
    ...DE
  },
  it: {
    ...itLocal,
    ...IT
  },
  'uk-UA': {
    ...ukLocal,
    ...UA
  },
  'fr-FR': {
    ...frLocal,
    ...FR
  },
}

const i18n = new VueI18n({
  locale: localStorage.getItem('Accept-Language') || 'en-US', // 设置语种
  messages, // 设置全局当地语言包,
  fallbackLocale: 'en-US', //如果没有找到要显示的语言，则默认显示 ‘en’
  silentTranslationWarn: true // 关闭警告信息
})

export default i18n

4. main.js中引入

import router from './router'
import store from './store'
// 国际化
import i18n from './Language/index'
import ElementUI from 'element-ui'

Vue.use(ElementUI, {
  fallbackLocale: 'en-US', //如果没有找到要显示的语言，则默认显示 ‘en’
  i18n: (key, value) => i18n.t(key, value)
})

new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#app')

至此，对于本地国际化就可以了，但是如果你想实现从远程拉取国际化，并覆盖本地呢？

首先我们要有一个接口接口封装到store中，dispatch调取

import { getI18nMessage } from '../../api/api'
import i18n from '@/Language';

const device = {
  state: {
  },
  mutations: {
    SET_LANGUAGE: (state, obj) => {
      // i18n.setLocaleMessage(obj.language, obj.data)
      i18n.mergeLocaleMessage(obj.language, obj.data) // 通过i18n的merge处理，既保留了本地国际化内容，也融入了远程国际化内容。
    }
  },
  actions: {
    setLanguage({ commit }, language = 'en-US') {
      getI18nMessage({ language }).then(res=> {
        const { success, data } = res
        if (success) {
          commit('SET_LANGUAGE', { language, data })
        } else {
          console.log('获取国际化失败')
        }
      }).catch(err => {
        console.log('获取国际化失败err', err)
      })
    }
  }
}

export default device

2. 调用时机，每次语言切换时，建议直接重刷页面，这样我们在main走完流程后，创建好vue实例的时候，去调用远程接口，此时i18n.mergeLocaleMessage就会存在，所以我们再App.vue中完成接口调取。

<template>
  <div id="app">
    <template v-if="WhiteliRtroutes.includes($route.path)">
      <router-view></router-view>
    </template>
    <template v-else>
      <IndexComponent></IndexComponent>
    </template>
  </div>
</template>

<script>
import IndexComponent from './components/IndexComponent.vue'
import { mapActions } from "vuex";
export default {
  components: { IndexComponent },
  data() {
    return {
      WhiteliRtroutes: ['/', "/login", "/404"]
    }
  },
  created() {
    // 获取服务语言
    this.$store.dispatch('setLanguage', localStorage.getItem('Accept-Language') || 'en-US');
  },
}

</script>

至此，我们基本实现了web端国际化方案。

另外，最好有一个国际化录入界面，界面上可以直接输入保存，也可以导入导出，我们目前还没时间搞，等实现了再来同步。