如何在Nuxt3中禁用内联脚本（inline-script）

Nuxt 3 配置方案 #

在项目根目录的nuxt.config.ts中添加或修改以下配置：

• 设置资源内联阈值为0，强制所有JS资源打包为独立文件：

export default defineNuxtConfig({
  build: {
    assetsInlineLimit: 0 // 所有资源都不内联，包括JS、CSS等
  },
  vite: {
    build: {
      rollupOptions: {
        output: {
          inlineDynamicImports: false // 禁用动态导入的内联
        }
      }
    }
  }
})

如果是SSR模式下的内联runtime脚本，可通过Nitro配置进一步优化：

export default defineNuxtConfig({
  nitro: {
    rollupConfig: {
      output: {
        inlineDynamicImports: false
      }
    }
  }
})

Nuxt 2 配置方案 #

在nuxt.config.js中通过webpack扩展来禁用内联脚本：

export default {
  build: {
    splitChunks: {
      layouts: true,
      pages: true,
      commons: true
    },
    extend(config, { isClient }) {
      if (isClient) {
        // 禁用webpack内联runtime chunk
        config.optimization.runtimeChunk = 'single'
        // 强制所有JS输出为独立文件
        config.output.inlineScript = false
      }
    }
  }
}

如果需要处理Nuxt 2默认的初始化内联脚本，可调整render配置（注意：可能影响客户端hydration，需测试后使用）：

export default {
  render: {
    injectScripts: false
  }
}

验证配置 #

修改后执行对应构建命令（Nuxt3用npx nuxi build，Nuxt2用npm run build），启动生产环境服务后查看页面源码，确认大部分JS已打包为独立.js文件。

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