V7

不同域名

您可能希望为应用支持的每种语言使用不同的域名。要实现这一点：

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

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

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

运行时环境变量

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

另一种方法是将域名保存在 Vuex 存储的 localeDomains 属性下。插件可以在初始化期间访问它，从而避免构建多个镜像的麻烦。

config/locale-domains.js
module.exports = {
  uk: process.env.DOMAIN_UK,
  fr: process.env.DOMAIN_FR
}
nuxt.config.js
const localeDomains = require('./config/locale-domains')
[
  '@nuxtjs/i18n',
  {
    differentDomains: process.env.NODE_ENV === 'production',
    locales: [
      {
        code: 'uk',
        domain: localeDomains.uk, // 可选
      },
      {
        code: 'fr',
        domain: localeDomains.fr, // 可选
      },
    ],
  },
]
store/index.js
const localeDomains = require('~~/config/locale-domains')

export const state = () => ({
  localeDomains
})

语言切换器

语言后备