vue后台管理系统——添加i18n国际化功能——技能提升

昨天在写后台管理系统时，遇到一个需求就是需要实现国际化功能。

antd和element-ui这两个框架其实都是有国际化的。

具体展示形式就是如下：

点击右上角头部的语言，切换语言，然后整个系统的文字都改变成对应的语言展示。

切换成英文的效果如下：

下面对整个系统的国际化进行介绍：

1.安装i18n插件，如果是使用的vue-admin的框架，则已经安装过了

具体i18n插件是否安装过了，可以在package,json中进行查看。

npm install vue-i18n --save

2.在utils文件夹中添加i18n.js文件——路由的国际化需要单独处理，其他的国际化是可以用公用国际化文件的

文件内容如下：

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import routesI18n from '@/router/i18n'
import {
    
    getI18nKey} from '@/utils/routerUtil'
import CommonI18n from '@/locales/common.i18n';

/**
 * 创建 i18n 配置
 * @param locale 本地化语言
 * @param fallback 回退语言
 * @returns {VueI18n}
 */
function initI18n(locale, fallback) {
    
    
  Vue.use(VueI18n)
  let i18nOptions = {
    
    
    locale,
    fallbackLocale: fallback,
    silentFallbackWarn: true,
    silentTranslationWarn: true,
    ...CommonI18n,
  }
  return new VueI18n(i18nOptions)
}

/**
 * 根据 router options 配置生成 国际化语言
 * @param lang
 * @param routes
 * @param valueKey
 * @returns {*}
 */
function generateI18n(lang, routes, valueKey) {
    
    
  routes.forEach(route => {
    
    
    let keys = getI18nKey(route.fullPath).split('.')
    let value = valueKey === 'path' ? route[valueKey].split('/').filter(item => !item.startsWith(':') && item != '').join('.') : route[valueKey]
    lang.assignProps(keys, value)
    if (route.children) {
    
    
      generateI18n(lang, route.children, valueKey)
    }
  })
  return lang
}

/**
 * 格式化 router.options.routes，生成 fullPath
 * @param routes
 * @param parentPath
 */
function formatFullPath(routes, parentPath = '') {
    
    
  routes.forEach(route => {
    
    
    let isFullPath = route.path.substring(0, 1) === '/'
    route.fullPath = isFullPath ? route.path : (parentPath === '/' ? parentPath + route.path : parentPath + '/' + route.path)
    if (route.children) {
    
    
      formatFullPath(route.children, route.fullPath)
    }
  })
}

/**
 * 从路由提取国际化数据
 * @param i18n
 * @param routes
 */
function mergeI18nFromRoutes(i18n, routes) {
    
    
  formatFullPath(routes)
  const CN = generateI18n(new Object(), routes, 'name')
  const US = generateI18n(new Object(), routes, 'path')
  i18n.mergeLocaleMessage('CN', CN)
  i18n.mergeLocaleMessage('US', US)
  const messages = routesI18n.messages
  Object.keys(messages).forEach(lang => {
    
    
    i18n.mergeLocaleMessage(lang, messages[lang])
  })
}

export {
    
    
  initI18n,
  mergeI18nFromRoutes,
  formatFullPath
}

3.router中添加i18n.js文件——路由的国际化需要单独处理，其他的国际化是可以用公用国际化文件的

文件内容如下：

注意：这个文件中的格式要跟路由配置文件中的格式要保持一致。比如user下面的children子页面有userCenter和changePassword两个，则需要像下面的对象一样做嵌套。

messages中的对象，多种语言就需要写多个对象，对象的key命名最好跟语言中的key保持一致。

module.exports = {
    
    
  messages: {
    
    
    CN: {
    
    
      home: {
    
     name: '首页' },
      demo: {
    
    
        name: '演示页',
      },
      user: {
    
    
        name: '个人中心',
        userCenter: {
    
     name: '个人信息' },
        changePassword: {
    
     name: '修改账户密码' },
      },
    },
    US: {
    
    
      home: {
    
     name: 'home' },
      demo: {
    
    
        name: 'Demo Page',
      },
       user: {
    
    
        name: 'user',
        userCenter: {
    
     name: 'userCenter' },
        changePassword: {
    
     name: 'changePassword' },
      },
    },
    HK: {
    
    
      home: {
    
     name: '首頁' },
      demo: {
    
    
        name: '演示頁',
      },
       user: {
    
    
        name: '個人中心',
        userCenter: {
    
     name: '個人信息' },
        changePassword: {
    
     name: '修改賬戶密碼' },
      },
    },
  },
};

4.utils中添加routerUtil.js文件

文件内容如下：

import routerMap from '@/router/async/router.map'
import {
    
    mergeI18nFromRoutes} from '@/utils/i18n'
import Router from 'vue-router'
import deepMerge from 'deepmerge'
import basicOptions from '@/router/async/config.async'

//应用配置
let appOptions = {
    
    
  router: undefined,
  i18n: undefined,
  store: undefined
}

/**
 * 设置应用配置
 * @param options
 */
function setAppOptions(options) {
    
    
  const {
    
    router, store, i18n} = options
  appOptions.router = router
  appOptions.store = store
  appOptions.i18n = i18n
}

/**
 * 根据 路由配置 和 路由组件注册 解析路由
 * @param routesConfig 路由配置
 * @param routerMap 本地路由组件注册配置
 */
function parseRoutes(routesConfig, routerMap) {
    
    
  let routes = []
  routesConfig.forEach(item => {
    
    
    // 获取注册在 routerMap 中的 router，初始化 routeCfg
    let router = undefined, routeCfg = {
    
    }
    if (typeof item === 'string') {
    
    
      router = routerMap[item]
      routeCfg = {
    
    path: router.path || item, router: item}
    } else if (typeof item === 'object') {
    
    
      router = routerMap[item.router]
      routeCfg = item
    }
    if (!router) {
    
    
      console.warn(`can't find register for router ${
      
      routeCfg.router}, please register it in advance.`)
      router = typeof item === 'string' ? {
    
    path: item, name: item} : item
    }
    // 从 router 和 routeCfg 解析路由
    const route = {
    
    
      path: routeCfg.path || router.path || routeCfg.router,
      name: routeCfg.name || router.name,
      component: router.component,
      redirect: routeCfg.redirect || router.redirect,
      meta: {
    
    
        authority: routeCfg.authority || router.authority || routeCfg.meta?.authority || router.meta?.authority || '*',
        icon: routeCfg.icon || router.icon ||  routeCfg.meta?.icon || router.meta?.icon,
        page: routeCfg.page || router.page ||  routeCfg.meta?.page || router.meta?.page,
        link: routeCfg.link || router.link ||  routeCfg.meta?.link || router.meta?.link
      }
    }
    if (routeCfg.invisible || router.invisible) {
    
    
      route.meta.invisible = true
    }
    if (routeCfg.children && routeCfg.children.length > 0) {
    
    
      route.children = parseRoutes(routeCfg.children, routerMap)
    }
    routes.push(route)
  })
  return routes
}

/**
 * 加载路由
 * @param routesConfig {RouteConfig[]} 路由配置
 */
function loadRoutes(routesConfig) {
    
    
  //兼容 0.6.1 以下版本
  /*************** 兼容 version < v0.6.1 *****************/
  if (arguments.length > 0) {
    
    
    const arg0 = arguments[0]
    if (arg0.router || arg0.i18n || arg0.store) {
    
    
      routesConfig = arguments[1]
      console.error('the usage of signature loadRoutes({router, store, i18n}, routesConfig) is out of date, please use the new signature: loadRoutes(routesConfig).')
      console.error('方法签名 loadRoutes({router, store, i18n}, routesConfig) 的用法已过时, 请使用新的方法签名 loadRoutes(routesConfig)。')
    }
  }
  /*************** 兼容 version < v0.6.1 *****************/

  // 应用配置
  const {
    
    router, store, i18n} = appOptions

  // 如果 routesConfig 有值，则更新到本地，否则从本地获取
  if (routesConfig) {
    
    
    store.commit('account/setRoutesConfig', routesConfig)
  } else {
    
    
    routesConfig = store.getters['account/routesConfig']
  }
  // 如果开启了异步路由，则加载异步路由配置
  const asyncRoutes = store.state.setting.asyncRoutes
  if (asyncRoutes) {
    
    
    if (routesConfig && routesConfig.length > 0) {
    
    
      const routes = parseRoutes(routesConfig, routerMap)
      const finalRoutes = mergeRoutes(basicOptions.routes, routes)
      formatRoutes(finalRoutes)
      router.options = {
    
    ...router.options, routes: finalRoutes}
      router.matcher = new Router({
    
    ...router.options, routes:[]}).matcher
      router.addRoutes(finalRoutes)
    }
  }
  // 提取路由国际化数据
  mergeI18nFromRoutes(i18n, router.options.routes)
  // 初始化Admin后台菜单数据
  const rootRoute = router.options.routes.find(item => item.path === '/')
  const menuRoutes = rootRoute && rootRoute.children
  if (menuRoutes) {
    
    
    store.commit('setting/setMenuData', menuRoutes)
  }
}

/**
 * 合并路由
 * @param target {Route[]}
 * @param source {Route[]}
 * @returns {Route[]}
 */
function mergeRoutes(target, source) {
    
    
  const routesMap = {
    
    }
  target.forEach(item => routesMap[item.path] = item)
  source.forEach(item => routesMap[item.path] = item)
  return Object.values(routesMap)
}

/**
 * 深度合并路由
 * @param target {Route[]}
 * @param source {Route[]}
 * @returns {Route[]}
 */
function deepMergeRoutes(target, source) {
    
    
  // 映射路由数组
  const mapRoutes = routes => {
    
    
    const routesMap = {
    
    }
    routes.forEach(item => {
    
    
      routesMap[item.path] = {
    
    
        ...item,
        children: item.children ? mapRoutes(item.children) : undefined
      }
    })
    return routesMap
  }
  const tarMap = mapRoutes(target)
  const srcMap = mapRoutes(source)

  // 合并路由
  const merge = deepMerge(tarMap, srcMap)

  // 转换为 routes 数组
  const parseRoutesMap = routesMap => {
    
    
    return Object.values(routesMap).map(item => {
    
    
      if (item.children) {
    
    
        item.children = parseRoutesMap(item.children)
      } else {
    
    
        delete item.children
      }
      return item
    })
  }
  return parseRoutesMap(merge)
}

/**
 * 格式化路由
 * @param routes 路由配置
 */
function formatRoutes(routes) {
    
    
  routes.forEach(route => {
    
    
    const {
    
    path} = route
    if (!path.startsWith('/') && path !== '*') {
    
    
      route.path = '/' + path
    }
  })
  formatAuthority(routes)
}

/**
 * 格式化路由的权限配置
 * @param routes 路由
 * @param pAuthorities 父级路由权限配置集合
 */
function formatAuthority(routes, pAuthorities = []) {
    
    
  routes.forEach(route => {
    
    
    const meta = route.meta
    const defaultAuthority = pAuthorities[pAuthorities.length - 1] || {
    
    permission: '*'}
    if (meta) {
    
    
      let authority = {
    
    }
      if (!meta.authority) {
    
    
        authority = defaultAuthority
      }else if (typeof meta.authority === 'string') {
    
    
        authority.permission = meta.authority
      } else if (typeof meta.authority === 'object') {
    
    
        authority = meta.authority
        const {
    
    role} = authority
        if (typeof role === 'string') {
    
    
          authority.role = [role]
        }
        if (!authority.permission && !authority.role) {
    
    
          authority = defaultAuthority
        }
      }
      meta.authority = authority
    } else {
    
    
      const authority = defaultAuthority
      route.meta = {
    
    authority}
    }
    route.meta.pAuthorities = pAuthorities
    if (route.children) {
    
    
      formatAuthority(route.children, [...pAuthorities, route.meta.authority])
    }
  })
}

/**
 * 从路由 path 解析 i18n key
 * @param path
 * @returns {*}
 */
function getI18nKey(path) {
    
    
  const keys = path.split('/').filter(item => !item.startsWith(':') && item != '')
  keys.push('name')
  return keys.join('.')
}

/**
 * 加载导航守卫
 * @param guards
 * @param options
 */
function loadGuards(guards, options) {
    
    
  const {
    
    beforeEach, afterEach} = guards
  const {
    
    router} = options
  beforeEach.forEach(guard => {
    
    
    if (guard && typeof guard === 'function') {
    
    
      router.beforeEach((to, from, next) => guard(to, from, next, options))
    }
  })
  afterEach.forEach(guard => {
    
    
    if (guard && typeof guard === 'function') {
    
    
      router.afterEach((to, from) => guard(to, from, options))
    }
  })
}

export {
    
    parseRoutes, loadRoutes, formatAuthority, getI18nKey, loadGuards, deepMergeRoutes, formatRoutes, setAppOptions}

5.router中async文件夹中添加router.map文件

里面的内容比较多，有需要的可以留个邮箱给我，我打包发给你。

6.重点是commonI18n文件，在locales文件夹中

common.i18n.js文件中的内容如下：

import CN from './CN';
import US from './US';
import HK from './HK';
//多种语言，则需要有多个文件用于区分

// 全局公共的国际化定义
export default {
    
    
  messages: {
    
    
    CN,
    US,
    HK,
  },
};

以CN.js为例：

// 全局公共的国际化定义 - CN
export default   {
    
    
  user:'用户',
  creator:'创建人',
  orderNo: '订单编号',
  search:'搜索',
  cancel:'取消',
  CancelEditing:'取消编辑',
  edit:'编辑',
  submit:'提交',
  reset:'重置',
  ....
}

对应的US.js文件内容如下：

// 全局公共的国际化定义 - US
export default {
    
    
  user:'User',
  creator:'Creator',
  orderNo: 'Order No',
  search: 'Search',
  cancel:'Cancel',
  edit:'Edit',
  CancelEditing:'Cancel Editing',
  submit:'Submit',
  reset:'Reset',
  ...
}

这个算是国际化的公共文件，国际化是就近原则，如果是单个页面有单独的i18n文件，则会从单独的i18n文件中查找对应的字段，没有找不到，则会从公共的i18n文件中去查找。

7.以单个文件国际化为例：

页面中使用国际化字段的方式$t(xxx)

8.路由的国际化文件需要跟路由配置文件进行匹配，其他页面的国际化要跟公共国际化文件的格式保持一致即可。

9.通过以上的步骤，菜单+页面中静态的文字都可以实现国际化了，但是接口返回的数据国际化，则需要接口返回不同的文字了。

此时可以在axios请求时，则请求头上添加当前的语言类型。

9.1 在axios拦截器文件中的请求部分添加如下的代码

我需要在拦截器.js文件中获取vuex中存储的lang字段的值，此时是拿不到vuex中的数据的，因为this是undefined

因此需要在main.js文件中添加如下的内容：

将vue挂载到window上，则其他页面都可以通过window.vm获取到vue了

...

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

拦截器中的写法：

const reqCommon = {
    
    
  /**
   * 发送请求之前做些什么
   * @param config axios config
   * @param options 应用配置 包含: {router, i18n, store, message}
   * @returns {*}
   */
  onFulfilled(config, options) {
    
    
    const {
    
     message } = options;
    const {
    
     url, xsrfCookieName, headers } = config;
    // if (url.indexOf('login') === -1 && xsrfCookieName && !Cookie.get(xsrfCookieName)) {
    
    
    //   message.warning('认证 token 已过期，请重新登录')
    // }
    if (
      headers.Authorization &&
      xsrfCookieName &&
      !Cookie.get(xsrfCookieName)
    ) {
    
    
      message.warning('认证 token 已过期，请重新登录');
    }
    config.headers['Authorization'] = Cookie.get(xsrfHeaderName);
    window.vm.$store.commit(
      'setting/setLang',
      localStorage.getItem('language') || 'CN'
    );
    console.log('语言', window.vm.$store.state.setting.lang);
    config.headers['language'] = window.vm.$store.state.setting.lang;
    return config;
  },
  .......

上面的代码最重要的就是：

window.vm.$store.commit(
  'setting/setLang',
  localStorage.getItem('language') || 'CN'
);
console.log('语言', window.vm.$store.state.setting.lang);
config.headers['language'] = window.vm.$store.state.setting.lang;

为什么要存储到localStorage中？因为，在切换语言时，接口也需要重新请求，则也就是说整个页面全部刷新，此时最简单的方法就是window.vm.$router.go(0)实现页面的刷新。

页面刷新时，vuex中的setting/lang的默认值是CN简体中文，为了能够存储上次切换的语言类型，可以存储到本地localStorage，这样浏览器不关闭的时候，这个缓存还是有的。

vuex中的setting文件中的setLang方法也需要改变

setLang(state, lang) {
    
    
  state.lang = lang;
  if (localStorage.getItem('language') != lang) {
    
    
    window.vm.$router.go(0);
  }
  localStorage.setItem('language', lang);
  console.log('setLang', window.vm.$route);
},

完成！！！