nuxt2+i18n 根据不同语言对应不同域名

客户提出了一个奇葩的需求，要我们做五个语言，然后每个语言对应语言国家的顶级域名，需要一套代码实现，看了i18n的文档发现有一个differentDomains可以实现这个功能，咱们就开整吧

1、在nuxt.config.js里面配置以下参数

export default defineNuxtConfig({
  modules: [
    ...,
    [
      {
        locales: [
          {
            code: 'vi',
            iso: 'vi-VN',
            file: 'vi.js',
            domain: 'vi.test.com',
          },
          {
            code: 'tw',
            iso: 'zh-TW',
            file: 'zh_TW.js',
            domain: 'tw.test.com',
          },
          {
            code: 'cn',
            iso: 'zh-CN',
            file: 'zh_CN.js',
            domain: 'cn.test.com',
          },
          {
            code: 'th',
            iso: 'th-TH',
            file: 'th.js',
            domain: 'th.test.com',
          },
          {
            code: 'en',
            iso: 'en-US',
            file: 'en.js',
            domain: 'en.test.com',
          },
        ],
        // 是否异步加载
        lazy: false,
        // 对应语言文件夹
        langDir: '~/lang/',
        // 默认语言
        // defaultLocale: 'tw',
        // 启用配置不同域名
        differentDomains: true,
        // 存储语言环境变量
        detectBrowserLanguage: {
          // 是否启用cookies
          useCookie: true,
          // cookie的key
          cookieKey: 'i18n_redirected',
          // 是否始终定向与cookies的值
          // alwaysRedirect: true,
          // 根据语言重定向
          // redirectOn: 'root'
        }
      }
    ]
  ]
})

2、切换语言，直接使用a标签或者通过域名替换，代码如下

// 域名替换
window.location = this.switchLocalePath(this.languageActive)

<!-- a标签跳转 -->
<a v-for="locale in availableLocales" :href="switchLocalePath(locale.code)" :key="locale.code">
  {{ locale.code }}
</a>

3、有一个问题就是在第一次进入网站的时候，asyncData里面请求接口拿不到对应域名的语言，而是浏览器默认语言，此时需要在middleware文件夹下增加一个i18n.js文件，代码如下

export default function ({ app, req, res }) {
  const host = process.server ? req.headers.host : window.location.host;
  const domainLocale = app.i18n.locales.find(locale => host.includes(locale.domain))
  if (domainLocale && app.i18n.locale !== domainLocale.code) {
    // 设置语言
    app.i18n.setLocale(domainLocale.code)
    app.i18n.setLocaleCookie(domainLocale.code)
    if (process.client) {
      // 页面强制刷新
      window.location.href = window.location.href;
    } 
    
    if (process.server && res) {
      // 页面强制刷新 
      res.setHeader('Cache-Control', 'no-store');
      res.statusCode = 302;
      res.setHeader('Location', req.url);
      res.end();
    }
  }
}

4、同时在nuxt.config.js里面添加以下代码

export default defineNuxtConfig({
  router: {
    middleware: ['i18n']
  }
})