使用 nuxt 开发网站 之 如何做国际化？

　　在页面画的差不多的时候，我就开始查一查如何国际化，并对一些静态的文字做国际化处理，接口请求时传参处理、路由变化时处理。路由要求：your_domain/en 就可以进行语言的切换。

• 使用中间件 i18n.js 。首先需要安装 vue-i18n ，装好了之后，在/middleware  文件夹下面新建 i18n.js，这里来设置store 、i18n.locale 中的anguage和路由中的展示（我也说不明白，大概就是这个意思）。 在路由变化，页面渲染前会调用中间件。

  export default function ({ isHMR, app, store, route, params, error, redirect }) {
      const defaultLocale = app.i18n.fallbackLocale
      // If middleware is called from hot module replacement, ignore it
      if (isHMR) { return }
      // Get locale from params
      const locale = params.lang || store.state.locale || defaultLocale
      if (!store.state.locales.includes(locale)) {
        return error({ message: '', statusCode: 404 })
      }
      // Set locale
      store.commit('SET_LANG', locale)
      app.i18n.locale = store.state.locale
      // If route is /<defaultLocale>/... -> redirect to /...
      // if (locale === defaultLocale && route.fullPath.indexOf('/' + defaultLocale) === 0) {
      //   const toReplace = '^/' + defaultLocale + (route.fullPath.indexOf('/' + defaultLocale + '/') === 0 ? '/' : '')
      //   const re = new RegExp(toReplace)
      //   return redirect(
      //     route.fullPath.replace(re, '/')
      //   )
      // }
      if(route.fullPath.indexOf('/' + locale) === -1){
         return redirect('/' + locale + '' + route.fullPath)
      }
    }
    

  就这样 路由就会展示成 your_domain/en/，当然如果在默认的语言下你不需要展示出 /en/，你也可以换成注释调的部分。

• 将 i18n 注入vue 实例。上面一段代码有用到了 app.i18n 那这里肯定又要将 i18n 注入vue 实例中，在 plugins 中添加文件 i18n,js , 同Vue.use 进行全局注册，并初始化i18n :

  import Vue from 'vue'
  import VueI18n from 'vue-i18n'
  
  Vue.use(VueI18n)
  
  export default ({ app, store }) => {
      // Set i18n instance on app
      // This way we can use it in middleware and pages asyncData/fetch
      app.i18n = new VueI18n({
          locale: store.state.locale,
          fallbackLocale: 'en', 
          messages: {
              'en': require('~/locales/en_US.json'),
              'zh-CN': require('~/locales/zh_CN.json')
          }
      })
  
      app.i18n.path = (link) => {
          if (app.i18n.locale === app.i18n.fallbackLocale) {
              return `/${link}`
            }
          return `/${app.i18n.locale}/${link}`
      }
  }

  这里我只尝试了中英文的语言的的json 配置，对应语言的json 文件放在更目录下 /locales文件夹下。

• 怎么调用呢？调用方式比较简单，template 中调用：{{$t(‘json 文件中的属性’)}} ，js 中调用  this.$t('json 文件中的属性')