如何生成无ES模块的Nuxt 3静态包以支持file://协议运行？

针对你的需求——打包出无需静态托管、直接通过浏览器打开index.html就能运行的Nuxt 3产物，可以通过以下几个方向改造：

1. 切换Webpack构建器并配置非模块输出 #

Nuxt 3默认用Vite，但Vite对非ESM输出支持有限，切换到Webpack后可以强制打包为IIFE（立即执行函数）格式，完全避开ES模块加载逻辑。

修改nuxt.config.ts：

export default defineNuxtConfig({
  builder: 'webpack', // 切换到Webpack构建器
  webpack: {
    output: {
      libraryTarget: 'iife', // 输出为全局可执行的IIFE格式
      filename: '[name].js',
      chunkFilename: '[name].js'
    },
    module: {
      rules: [
        {
          test: /\.m?js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: [['@babel/preset-env', { targets: "defaults" }]]
            }
          }
        }
      ]
    }
  },
  app: {
    baseURL: './', // 关键：设置所有资源的基础路径为相对路径
    cdnURL: './'
  },
  nitro: {
    output: {
      publicDir: './dist',
    },
    preset: 'static', // 采用静态站点打包模式
    serveStatic: true
  }
})

IIFE格式的脚本可以直接在浏览器全局环境运行，不需要任何模块加载器支持，完美适配file://协议。

2. 调整Nuxt配置避免模块相关逻辑 #

禁用Nuxt的一些模块预加载和动态特性，减少ESM相关的代码生成：

export default defineNuxtConfig({
  // ... 其他已有配置
  experimental: {
    payloadExtraction: false, // 禁用payload提取，避免模块式资源加载逻辑
    renderJsonPayloads: false,
    noScripts: false
  },
  components: {
    global: true,
    dirs: ['~/components'] // 强制静态导入所有组件，关闭组件懒加载
  }
})

同时要确保所有静态资源（图片、样式）都用相对路径引用，不要用绝对路径，避免file://协议下的跨域问题。

3. 后处理打包产物 #

如果Webpack打包后仍有残留的ESM语法，或者index.html里还有<script type="module">标签，需要手动调整：

• 安装@babel/cli和@babel/preset-env，执行命令转换JS文件：

babel dist/assets --out-dir dist/assets --presets=@babel/preset-env

• 打开dist/index.html，把所有带type="module"的script标签改成普通<script>，移除type="module"属性，确保浏览器直接执行脚本。

4. 验证运行 #

打包完成后，直接用浏览器打开dist/index.html，检查控制台：

• 确认所有JS、CSS、图片都通过file://路径正常加载，没有404或CORS错误
• 测试页面功能，确保没有模块加载相关的报错

注意事项 #

• 尽量避免依赖仅支持ESM的第三方库，如果必须使用，优先选择提供UMD/IIFE版本的包
• Nuxt 3的自动导入特性可能会生成一些模块代码，必要时可以手动导入替代自动导入

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