多域名语言环境
为多种语言环境设置多个域名。为您的应用支持的每种语言使用不同的域名。
如何设置多域名语言环境:
- 将
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_UK 和 DOMAIN_FR。
仅对部分语言使用不同域名
如果多个域共享相同的默认语言,则可以使用 defaultForDomains 指定所有这些域,该属性支持多个域。
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' 策略,以下请求将是:
- https://mydomain.com -> https://mydomain.com/en (英语)
- https://mydomain.com/pl -> https://mydomain.com/pl (波兰语)
- https://mydomain.com/ua -> https://mydomain.com/ua (乌克兰语)
- https://mydomain.com/nl -> https://mydomain.com/nl (荷兰语)
- https://en.mydomain.com -> https://en.mydomain.com/en (英语)
- https://es.mydomain.com -> https://es.mydomain.com/es (西班牙语)
- https://fr.mydomain.com -> https://fr.mydomain.com/fr (法语)
- https://fr.mydomain.com/de -> https://fr.mydomain.com/de (德语)
当使用 'prefix_except_default' 策略时,相同的请求将是:
- https://mydomain.com -> https://mydomain.com (英语)
- https://mydomain.com/pl -> https://mydomain.com/pl (波兰语)
- https://mydomain.com/ua -> https://mydomain.com/ua (乌克兰语)
- https://mydomain.com/nl -> https://mydomain.com/nl (荷兰语)
- https://en.mydomain.com -> https://en.mydomain.com (英语)
- https://es.mydomain.com -> https://es.mydomain.com (西班牙语)
- https://fr.mydomain.com -> https://fr.mydomain.com (法语)
- https://fr.mydomain.com/de -> https://fr.mydomain.com/de (德语)