如何在Nuxt-i18n中为特定页面所有路由统一设置/en为规范URL

问题原因 #

nuxt-i18n默认会为每个语言版本的页面自动生成对应语言的规范（canonical）URL，你手动在head中添加英文版本的canonical后，就会导致页面同时存在两个不同的canonical链接。

解决方案 #

方案1：全局配置统一指向英文规范URL #

在nuxt.config.js的i18n配置中，自定义canonical的生成逻辑，让所有非英文页面的规范URL自动指向对应英文页面：

export default {
  i18n: {
    locales: ['en', 'fr', 'it', 'es', 'ar'],
    defaultLocale: 'en',
    canonicalUrls: {
      baseUrl: 'https://example.com',
      resolve(locale, route) {
        // 移除当前语言前缀，替换为英文前缀/en
        const englishPath = route.fullPath.replace(`/${locale}`, '/en')
        return `https://example.com${englishPath}`
      }
    }
  }
}

这种方式无需在单个页面中重复配置，所有页面的非英文版本都会自动将canonical指向对应的英文页面。

方案2：页面级手动指定规范URL #

如果仅需要为特定页面设置英文规范URL，可以在页面组件中通过i18n配置覆盖自动生成的canonical：

export default {
  // 直接指定固定的英文规范URL
  i18n: {
    canonical: 'https://example.com/en/terms'
  },

  // 若需动态生成（比如根据当前路由）
  // async asyncData({ app, $route }) {
  //   // 移除当前语言前缀，拼接英文版本路径
  //   const englishPath = $route.path.replace(`/${app.i18n.locale}`, '/en')
  //   return {
  //     canonicalUrl: `${app.i18n.baseUrl}${englishPath}`
  //   }
  // },
  // i18n() {
  //   return {
  //     canonical: this.canonicalUrl
  //   }
  // }
}

通过i18n.canonical配置，会直接覆盖nuxt-i18n自动生成的当前语言canonical，确保页面仅存在一个指向英文版本的规范URL。

验证 #

配置完成后，运行项目并访问非英文页面（比如/it/terms），查看页面源码，确认<link rel="canonical">仅存在一个，且指向https://example.com/en/terms。

内容的提问来源于stack exchange，提问作者mysticalnetcore