您可能想为您的应用支持的每种语言使用不同的域名。
以下是实现这一目标的方法:
differentDomains
选项设置为 true
locales
选项配置为一个对象数组,每个对象都有一个 domain
键,其值为您希望用于该语言环境的域名。可选地包含端口(如果是非标准的)和/或协议。如果未提供协议,则会尝试自动检测,但在某些情况下(如静态生成的页面),这可能无法正确工作。detectBrowserLanguage
设置为 false
。启用时(默认启用),用户在第一次访问时可能会被重定向到另一个域。如果您希望确保访问指定域始终显示相应语言环境的页面,请将其设置为 false
。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
是在构建时使用的,因此需要为不同环境创建不同的构建。
export const localeDomains = {
uk: process.env.DOMAIN_UK,
fr: process.env.DOMAIN_FR
}
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
例如:
NUXT_PUBLIC_I18N_LOCALES_UK_DOMAIN=uk.example.test
NUXT_PUBLIC_I18N_LOCALES_FR_DOMAIN=fr.example.test
NUXT_PUBLIC_I18N_LOCALES_UK_DOMAIN=uk.staging.example.test
NUXT_PUBLIC_I18N_LOCALES_FR_DOMAIN=fr.staging.example.test
如果一个或多个域需要托管多种语言,则每个域的默认语言需要将 domainDefault: true
,以便进行域级回退。
不过仍然需要将选项 differentDomains
设置为 true
。
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'
策略时,相同请求将是: