前端笔记（12）nuxt js 多语言方案

1. 使用vue-i18n实现国际化,多语言数据保存在locales文件夹内；
2. 通过URL的params与vuex共同维护当前语言状态；
3. 路由改变时触发middleware/i18n.js中间件，如果当前路由不包含多语言即params.lang为空，重定向到当前语言。 最后调用commit（'SET_LANG'），并修改i18n.locale。

nuxt.config.js
前端路由国际化处理

router: {
    // 国际化中间件
    middleware: 'i18n',
    extendRoutes (routes) {
      // 路由国际化处理
      routes.forEach((r) => {
        if (r.path === '/') {
          r.path = `/:lang(${locales.join('|')})?`
        } else {
          r.path = `/:lang(${locales.join('|')})?${r.path}`
        }
      })
      ...
  },

./pugins/i18n.js
国际化插件初始化vue-i18n

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import zhCn from '@/locales/zh-cn'
import enUs from '@/locales/en-us'
import zhHk from '@/locales/zh-hk'
Vue.use(VueI18n)

export default ({ app, store }) => {
  app.i18n = new VueI18n({
    locale: store.state.locale,
    fallbackLocale: 'en-us',
    messages: {
      'zh-cn': zhCn,
      'zh-hk': zhHk,
      'en-us': enUs
    }
  })
}

./locales
国际化文件目录

locales
├─zh-hk
|   ├─index.js                 //导出语言模块
|   ├─modules                  // 多语言模块化 
|   |    ├─about.js
|   |    ├─business.js
|   |    └index.js             // 扫描modules目录整合所有模块
├─zh-cn
|   ├─index.js
|   ├─modules
|   |    ├─about.js
|   |    ├─business.js
|   |    └index.js
├─en-us
|   ├─index.js
|   ├─modules
|   |    ├─about.js
|   |    ├─business.js
|   |    └index.js

/locales/zh-hk/modules/index.js
整合模块，项目中多处使用

// 扫描目录,整合所有模块
const files = require.context('.', false, /\.js$/)
const modules = {}

files.keys().forEach((key) => {
  if (key === './index.js') { return }
  modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
})

export default modules

./client/middleware
国际化中间件

export default function ({ isHMR, app, store, params, error, req, route, redirect }) {
  // 未匹配到任何路由
  if (!route.matched || route.matched.length <= 0) {
    return error({ message: 'This page could not be found.', statusCode: 404 })
  }
  // nodemon热更新忽略
  if (isHMR) { return }
  // 确定当前语言
  const locale = params.lang || store.state.locale || app.i18n.fallbackLocale
  // 重定向到多语言
  if (!params.lang & route.fullPath === '/') {
    return redirect(`/${locale}`)
  } else if (!params.lang) {
    return redirect(`/${locale}${route.fullPath}`)
  }
  // 设置语言
  store.commit('SET_LANG', locale)
  app.i18n.locale = store.state.locale
}