指南

多域名语言环境

为多个语言环境设置多个域名。对支持的每种语言使用不同的域名。

如何设置多域名语言环境:

  • multiDomainLocales 选项设置为 true
  • locales 选项配置为对象数组:
    • 每个对象都有一个 domains 键,其值是您希望用于该语言环境的域名数组。可选地包括端口(如果不是标准端口)和/或协议。如果未提供协议,则会尝试自动检测,但在某些情况下(例如页面是静态生成的)可能无法正常工作。
    • 可选地为每个对象设置 defaultForDomains 键,其值是您希望用于该语言环境的默认域名数组。可选地包括端口(如果不是标准端口)和/或协议。如果未提供协议,则会尝试自动检测,但在某些情况下(例如页面是静态生成的)可能无法正常工作。
  • 可选地将 detectBrowserLanguage 设置为 false。启用时(默认启用),用户在首次访问时可能会被重定向到不同的域。如果您希望确保访问给定域总是显示相应语言环境的页面,请设置为 false
nuxt.config.ts
const i18nDomains = ['mydomain.com', 'es.mydomain.com', 'fr.mydomain.com', 'http://pl.mydomain.com', 'https://ua.mydomain.com']

export default defineNuxtConfig({
  i18n: {
    locales: [
      {
        code: 'en',
        domains: i18nDomains,
        defaultForDomains: ['mydomain.com']
      },
      {
        code: 'es',
        domains: i18nDomains,
        defaultForDomains: ['es.mydomain.com']
      },
      {
        code: 'fr',
        domains: i18nDomains,
        defaultForDomains: ['fr.mydomain.com']
      },
      {
        code: 'pl',
        domains: i18nDomains,
        defaultForDomains: ['http://pl.mydomain.com']
      },
      {
        code: 'ua',
        domains: i18nDomains,
        defaultForDomains: ['https://ua.mydomain.com']
      },
      {
        code: 'nl',
        domains: i18nDomains
      },
      {
        code: 'de',
        domains: i18nDomains
      },
    ],
    multiDomainLocales: true
  }
})

运行时环境变量

有时需要在不同的环境中更改域,例如预发布和生产环境。由于 nuxt.config.ts 在构建时使用,因此需要为不同的环境创建不同的构建。

locale-domains.config.ts
export const localeDomains = {
  uk: process.env.DOMAIN_UK,
  fr: process.env.DOMAIN_FR
}
nuxt.config.ts
import { localeDomains } from './locale-domains.config'

const i18nDomains = [localeDomains.uk, localeDomains.fr]

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],

  i18n: {
    multiDomainLocales: true,
    locales: [
      {
        code: 'uk',
        domains: i18nDomains,
        defaultForDomains: [localeDomains.uk]
      },
      {
        code: 'fr',
        domains: i18nDomains,
        defaultForDomains: [localeDomains.fr]
      }
    ]
  }
})

使用上述配置,需要针对预发布和生产环境运行构建,并使用不同的 .env 文件指定 DOMAIN_UKDOMAIN_FR

仅对某些语言使用不同的域名

如果一个或多个域名需要托管多种语言,则每个域名的默认语言需要设置 domainDefault: true,以便实现每个域名的后备语言环境。不过,选项 differentDomains 仍然需要设置为 true

nuxt.config.js
const i18nDomains = ['mydomain.com', 'en.mydomain.com', 'es.mydomain.com', 'fr.mydomain.com', 'http://pl.mydomain.com', 'https://ua.mydomain.com']

export default defineNuxtConfig({
  // ...
  i18n: {
    locales: [
      {
        code: 'en',
        domains: i18nDomains,
        defaultForDomains: ['mydomain.com', 'en.mydomain.com']
      },
      {
        code: 'es',
        domains: i18nDomains,
        defaultForDomains: ['es.mydomain.com']
      },
      {
        code: 'fr',
        domains: i18nDomains,
        defaultForDomains: ['fr.mydomain.com']
      },
      {
        code: 'pl',
        domains: i18nDomains,
        defaultForDomains: ['http://pl.mydomain.com']
      },
      {
        code: 'ua',
        domains: i18nDomains,
        defaultForDomains: ['https://ua.mydomain.com']
      },
      {
        code: 'nl',
        domains: i18nDomains
      },
      {
        code: 'de',
        domains: i18nDomains
      },
    ],
    strategy: 'prefix',
    multiDomainLocales: true
  },
  // ...
})

在上述配置使用 prefix 策略时,以下请求将会是:

在使用 prefix_except_default 策略时,这些请求的结果将是: