Nuxt部署Vercel后直接访问路由页面被下载问题排查

问题场景：将Nuxt应用部署到Vercel并绑定自定义域名后，首页可正常打开，但直接访问非首页路由（如https://stackwealth.in/blogs/）、刷新页面时，浏览器会触发页面下载，本地开发环境无此异常。

可能的原因及解决方案 #

• Vercel路由重写规则缺失
  SPA应用需要Vercel将所有路由请求转发到index.html，否则非首页路由返回的内容可能缺少正确的MIME类型标识，浏览器会误判为文件进行下载。解决方法是在项目根目录创建vercel.json文件，添加以下配置：

  {
    "rewrites": [
      { "source": "/(.*)", "destination": "/index.html" }
    ]
  }
  

• Nitro预渲染配置不完整
  当前配置中Nitro预渲染仅指定了/和/sitemap.xml，尽管开启了crawlLinks，但可能因爬取不彻底导致部分路由未生成预渲染文件，请求时返回内容格式异常。可以手动补充需要预渲染的核心路由：

  nitro: {
    prerender: {
      crawlLinks: true,
      routes: ['/', '/blogs', '/faqs', '/opportunities', '/calculators', '/sitemap.xml']
    },
    compressPublicAssets: {
      gzip: true,
      brotli: true,
    },
  }
  

• Vercel缓存或域名配置问题
  自定义域名绑定后可能存在旧响应头缓存，导致浏览器识别错误。可以尝试清除Vercel项目缓存后重新部署，同时检查域名DNS配置是否正确，确保Vercel已完成域名验证。

原Nuxt配置 #

export default defineNuxtConfig({
    devServer: {
        port: 5100
    },
    runtimeConfig: {
        public: {
            siteUrl: process.env.SITE_URL,
            apiUrl: process.env.API_URL
        },
        supabaseUrl: process.env.SUPABASE_URL,
        supabaseKey: process.env.SUPABASE_KEY,
        ghostUrl: process.env.GHOST_URL,
        ghostKey: process.env.GHOST_API_KEY
    },
    devtools: {
        enabled: true,
        
        timeline: {
            enabled: true
        }
    },
    router: {
        options: {
            scrollBehaviorType: 'smooth'
        }
    },
    pages: true,
    components: [
        {
            path: '~/components',
            pathPrefix: false
        }
    ],
    app: {
        head: { ... }
            
    },
    plugins: [],
    css: [
        'bootstrap/dist/css/bootstrap.min.css',
        '@/assets/scss/app.scss'
    ],
    modules: [
        '@stefanobartoletti/nuxt-social-share',
        '@bootstrap-vue-next/nuxt',
        'vue3-carousel-nuxt',
        'dayjs-nuxt',
        '@nuxtjs/supabase',
        '@nuxt/content',
        '@nuxtjs/robots',
        'nuxt-gtag',
        'nuxt-simple-sitemap'
    ],
    gtag: {
        id: '...',
        config: {
            page_title: '...'
        }
    },
    supabase: {
        redirect: false
    },
    robots: {
        rules: {
            UserAgent: '*',
            Disallow: '',
            Sitemap: 'https://stackwealth.in/sitemap.xml'
        }
    },
    nitro: {
        prerender: {
            crawlLinks: true,
            routes: ['/', '/sitemap.xml']
        },
        compressPublicAssets: {
            gzip: true,
            brotli: true,
        },
    },
    sitemap: {
        sources: [
            '/api/__sitemap__/blogs',
            '/api/__sitemap__/faqs',
            '/api/__sitemap__/opportunities',
            '/api/__sitemap__/calculators',
        ]
    }
});

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