Nuxt.js生产环境Canonical URL被覆盖问题求助

问题场景 #

• 基于Nuxt.js的SSR应用，通过AWS S3+CloudFront部署
• 本地开发时，页面通过head()函数配置的自定义Canonical URL显示正常（例如博客首页为https://stackwealth.in/blogs）
• 构建部署到生产环境后，所有页面的Canonical URL被替换为根域名https://stackwealth.in/，路由路径丢失
• 项目使用nuxt generate生成静态页面，通过getBlogRoutes()获取动态路由

解决方案 #

1. 配置正确的router.base #

在nuxt.config.js中明确路由基础路径，避免Nuxt在生产环境自动推断错误：

export default {
  // ...其他配置
  router: {
    base: process.env.NODE_ENV === 'production' ? '/' : '/'
    // 若部署在子路径下需修改，此处根域名部署保持为'/'即可
  }
}

2. 动态生成Canonical URL，避免硬编码 #

硬写URL容易出现环境不一致问题，改用Nuxt内置变量动态生成：

head() {
  // 结合环境变量和当前路由生成完整URL
  const canonicalUrl = `${this.$config.BASE_URL}${this.$route.fullPath}`
  return {
    title: 'StackWealth Blog: Financial Insights & Investment Tips',
    meta: [
      {
        hid: 'description',
        name: 'description',
        content: '...'
      }
    ],
    link: [
      {
        hid: 'canonical',
        rel: 'canonical',
        href: canonicalUrl
      }
    ]
  }
}

同时在nuxt.config.js中配置全局环境变量：

export default {
  // ...其他配置
  publicRuntimeConfig: {
    BASE_URL: process.env.BASE_URL || 'https://stackwealth.in'
  }
}

在.env文件中设置生产环境的BASE_URL=https://stackwealth.in，确保构建时注入正确域名。

3. 检查AWS部署环节配置 #

• CloudFront：检查行为规则中是否存在强制重定向到根路径的配置，比如错误的重定向策略导致路径被截断
• S3静态网站托管：确认索引文档设置正确，未配置错误的重定向规则，避免页面路径被修改

4. 验证本地生成的静态文件 #

执行nuxt generate后，查看dist文件夹中对应页面的HTML源码：

• 如果本地生成的Canonical URL就异常，说明是Nuxt代码或配置问题
• 如果本地正常、部署后异常，问题出在AWS部署环节的缓存或重定向配置

5. 排查hid属性冲突 #

确保全局nuxt.config.js的head.link中没有定义hid="canonical"的标签，避免页面自定义的Canonical被全局配置覆盖。

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