指南

不同域名

为您的应用所支持的每种语言使用不同的域名。

您可能希望为您的应用所支持的每种语言使用不同的域名。

以下是实现此目的的方法：

  • 将 differentDomains 选项设置为 true
  • 将 locales 选项配置为包含对象的数组，每个对象都有一个 domain 键，其值为您希望用于该语言环境的域名。可选择性地包括一个端口（如果不是标准端口）和/或一个协议。如果未提供协议，则会尝试自动检测，但在某些情况下（例如页面是静态生成的）可能无法正确工作。
  • 可选择性地将 detectBrowserLanguage 设置为 false。启用时（默认启用），用户在第一次访问时可能会被重定向到不同的域。如果您希望确保访问特定域始终显示相应语言环境的页面，请将其设置为 false。
nuxt.config.ts
export default defineNuxtConfig({
  i18n: {
    locales: [
      {
        code: 'en',
        domain: 'mydomain.com'
      },
      {
        code: 'es',
        domain: 'es.mydomain.com'
      },
      {
        code: 'fr',
        domain: 'fr.mydomain.com'
      },
      {
        code: 'pl',
        domain: 'http://pl.mydomain.com'
      },
      {
        code: 'ua',
        domain: 'https://ua.mydomain.com'
      }
    ],
    differentDomains: true
    // 或仅在生产环境中启用此选项
    // differentDomains: (process.env.NODE_ENV === 'production')
  }
})

在使用不同的域名时，您的语言切换器应使用常规的 <a> 标签：

<script setup>
const { locale, locales } = useI18n()
const switchLocalePath = useSwitchLocalePath()

const availableLocales = computed(() => {
  return locales.value.filter(i => i.code !== locale.value)
})
</script>

<template>
  ...
  <a v-for="locale in availableLocales" :href="switchLocalePath(locale.code)" :key="locale.code">
    {{ locale.code }}
  </a>
  ...
</template>

运行时环境变量

有时需要在不同的环境中更改域名，例如在预发布和生产环境中。 由于 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'

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

  i18n: {
    differentDomains: process.env.NODE_ENV === 'production',
    locales: [
      {
        code: 'uk',
        domain: localeDomains.uk
      },
      {
        code: 'fr',
        domain: localeDomains.fr
      }
    ]
  }
})

使用上述配置，需要为预发布和生产环境运行构建，并使用不同的 .env 文件来指定 DOMAIN_UK 和 DOMAIN_FR。

另一种方法是，通过运行时环境变量覆盖语言环境域名，以避免多次构建的需要。变量名称应遵循格式 NUXT_PUBLIC_I18N_LOCALES_{locale code}_DOMAIN

例如：

production.env
NUXT_PUBLIC_I18N_LOCALES_UK_DOMAIN=uk.example.test
NUXT_PUBLIC_I18N_LOCALES_FR_DOMAIN=fr.example.test
staging.env
NUXT_PUBLIC_I18N_LOCALES_UK_DOMAIN=uk.staging.example.test
NUXT_PUBLIC_I18N_LOCALES_FR_DOMAIN=fr.staging.example.test

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

如果一个或多个域名需要承载多种语言，则每个域名的默认语言需要设置 domainDefault: true，以便有每个域名的回退语言环境。 不过，选项 differentDomains 仍然需要设置为 true。

nuxt.config.js
export default defineNuxtConfig({
  // ...
  i18n: {
    locales: [
      {
        code: 'en',
        domain: 'mydomain.com',
        domainDefault: true
      },
      {
        code: 'pl',
        domain: 'mydomain.com'
      },
      {
        code: 'ua',
        domain: 'mydomain.com'
      },
      {
        code: 'es',
        domain: 'es.mydomain.com',
        domainDefault: true
      },
      {
        code: 'fr',
        domain: 'fr.mydomain.com',
        domainDefault: true
      }
    ],
    strategy: 'prefix',
    differentDomains: true
    // 或仅在生产环境中启用此选项
    // differentDomains: (process.env.NODE_ENV === 'production')
  },
  // ...
})

根据上述配置和 prefix 策略，以下请求将是：

使用 prefix_except_default 策略时，相同的请求将是：

语言切换器

如何更改您网站的当前语言。

多域名语言环境

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