You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

求助:NUXT.js生成纯静态HTML时如何排除_nuxt相关脚本?

How to Generate Pure Static HTML with Nuxt (No _nuxt Folder/Client JS)

Absolutely, I’ve dealt with this exact requirement before—generating fully static HTML without any of Nuxt’s client-side SPA baggage. Here’s how to pull it off for both Nuxt 2 and Nuxt 3:

For Nuxt 2

Modify your nuxt.config.js with these settings to strip out all _nuxt-related scripts, links, and client-side code:

export default {
  // Enable static site generation mode
  mode: 'static',
  generate: {
    // Disable SPA fallback (no 404.html for client-side routing)
    fallback: false,
    // Force pure static output instead of pre-rendered SPA
    static: true
  },
  render: {
    // Turn off resource hints (prevents preload links to _nuxt assets)
    resourceHints: false,
    // Disable Vue hydration entirely (no client-side Vue initialization)
    hydrate: false
  },
  build: {
    // Extract CSS to separate files (avoids client-side style injection)
    extractCSS: true,
    // Prevent generation of client-side JS bundles
    extend(config, { isClient }) {
      if (isClient) {
        config.entry = {}; // Empty client entry to skip bundle creation
      }
    }
  },
  head: {
    // Clear default scripts/links to avoid _nuxt resource references
    script: [],
    link: []
  }
}

After updating the config, run nuxt generate—your dist folder will contain only static HTML, CSS, and assets, with no _nuxt directory.

For Nuxt 3

In Nuxt 3, use these settings in nuxt.config.ts to achieve the same result:

export default defineNuxtConfig({
  // Enable SSR to pre-render pure HTML
  ssr: true,
  nitro: {
    prerender: {
      // No SPA fallback for client-side routing
      fallback: false,
      // Disable client-side JS generation
      client: false
    },
    // Turn off resource preload hints for _nuxt assets
    resourceHints: false
  },
  app: {
    // Disable Vue hydration on the client
    hydrate: false
  },
  build: {
    // Skip creating client-side bundles
    extend(config, { isClient }) {
      if (isClient) {
        config.entry = {};
      }
    }
  },
  // Disable all client-only plugins to avoid client JS injection
  plugins: {
    client: []
  }
})

Run nuxi generate and check the .output/public folder—you’ll find clean static HTML with no _nuxt folder or client-side scripts.

Key Notes

  • Remove client-side code: Make sure your page components don’t use client-only hooks like onMounted or useClientOnly—these will trigger unwanted client JS generation.
  • Check dependencies: Ensure any third-party libraries you’re using are compatible with server-side rendering and don’t inject client-side scripts automatically.
  • Verify output: After generation, open an HTML file in your browser and inspect the source—there should be no references to _nuxt in <script> or <link> tags.

Give these configs a shot, and feel free to ask if you hit any roadblocks!

内容的提问来源于stack exchange,提问作者igorify

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.19 07:51:07