Nuxt 3生产环境请求返回Loader代码而非正常响应问题求助

问题原因 #

你的配置中nitro.preset设置为service-worker，但你采用的是静态部署方式（npx serve .output/public或上传至静态服务器），两者不匹配。service-worker预设用于PWA场景，会导致路由拦截逻辑异常，所有请求被返回Nuxt Loader代码。

解决方案 #

1. 修改Nitro预设配置 #

在nuxt.config.ts中将Nitro预设改为static，适配静态部署场景：

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  sourcemap: {
    server: true,
    client: true
  },
  ssr: false,
  nitro: {
    preset: 'static' // 替换为static预设
  },
  build: {
        transpile: ["primevue"]
    },
  modules: [
    // ...
    '@pinia/nuxt',
    '@nuxtjs/apollo',
    'vue3-carousel-nuxt',
  ],
  devtools: { enabled: true },
  pinia: {
    autoImports: [
      'defineStore',
      ['defineStore', 'definePiniaStore'],
    ],
  },
  apollo: {
    autoImports: true,
    authType: 'Session',
    authHeader: 'woocommerce-session',
    tokenStorage: 'cookie',
    tokenName: 'woocommerce-session',
    clients: {
      default: {
        httpEndpoint: 'https://ojuvi.by/api/graphql',
      },
    },
  },
  css: ["~/public/css/style.less"],
});

2. 重新构建项目 #

执行构建命令生成正确的静态资源：

bun run build

3. 重新部署 #

将.output/public目录下的文件重新部署到服务器，或用npx serve .output/public启动服务，此时API请求会正常转发到指定的GraphQL端点。

额外说明 #

• 由于你设置了ssr: false，所有GraphQL请求会在客户端直接发送到httpEndpoint配置的外部接口，确保该接口已正确配置CORS允许你的生产域名访问（开发环境正常说明本地CORS已处理）。

内容的提问来源于stack exchange，提问作者конструктор