Nuxt3(Vite)中如何将指定文件夹单独编译输出到独立目录

基于Vite构建的Nuxt 3完全可以实现该自定义编译需求，原有pages、layouts、middlewares等默认目录的构建逻辑不需要改动，只需要通过Nuxt配置扩展，给specialfolder增加独立编译流程即可。

具体配置方法 #

所有配置都写在项目根目录的nuxt.config.ts文件中，核心逻辑分两部分：一是让Nuxt默认的约定式扫描忽略specialfolder，避免该目录代码被重复打包进dist；二是挂载Nuxt构建钩子，在默认构建流程结束后，调用Vite的独立编译能力处理specialfolder，输出到指定的special_output目录。

完整配置示例：

import { defineNuxtConfig } from 'nuxt/config'
import { build } from 'vite'
import path from 'path'
// 多文件按目录结构输出需要用到glob，先执行 npm i glob -D 安装
import { glob } from 'glob'

export default defineNuxtConfig({
  // 1. 排除specialfolder，不纳入Nuxt默认扫描编译范围
  ignore: ['specialfolder/**/*'],

  // 原有Nuxt、Vite配置保持不变即可
  vite: {
    // 你原来的vite配置写在这里
  },

  // 2. 注册构建钩子，单独编译specialfolder
  hooks: {
    async 'build:done'() {
      await build({
        root: process.cwd(),
        configFile: false,
        build: {
          outDir: path.resolve(__dirname, 'special_output'),
          emptyOutDir: true,
          rollupOptions: {
            // 扫描specialfolder下所有ts/js文件作为编译入口
            input: Object.fromEntries(
              glob.sync('specialfolder/**/*.{ts,js}').map(file => [
                path.relative('specialfolder', file.slice(0, file.length - path.extname(file).length)),
                path.resolve(__dirname, file)
              ])
            ),
            // 不需要打包进产物的外部依赖在这里配置，比如Nuxt、Vue相关依赖
            external: ['vue', '#imports', '#app'],
            output: {
              format: 'esm',
              entryFileNames: '[name].js',
              // 保留原目录结构输出
              preserveModules: true,
              preserveModulesRoot: 'specialfolder'
            }
          }
        }
      })
    }
  }
})

效果验证 #

配置完成后直接执行常规构建命令npm run build即可：

• Nuxt会先完成默认构建，把pages、layouts、middlewares等约定目录的产物正常输出到dist目录
• 默认构建完成后会自动触发specialfolder的独立编译，最终产物输出到根目录下的special_output目录，目录结构和源码中specialfolder的结构完全一致
• 最终构建产物的根目录结构和预期完全匹配

注意事项 #

• 如果specialfolder里的代码需要用到Nuxt的自动导入能力（比如useRuntimeConfig、useState等），需要在上面独立Vite编译的配置里补充unplugin-auto-import插件，对齐Nuxt的自动导入规则，否则编译时会报导入不存在的错误。
• 如果specialfolder里是不依赖Nuxt运行时的纯工具逻辑、独立业务代码，不需要额外配置插件，直接编译即可。
• 如果你需要把specialfolder打包成单文件而不是保留目录结构，把上面配置里的rollupOptions.input和output的preserveModules相关配置删掉，换成lib配置即可，示例：

  build: {
    outDir: path.resolve(__dirname, 'special_output'),
    emptyOutDir: true,
    lib: {
      entry: path.resolve(__dirname, 'specialfolder/index.ts'),
      formats: ['es'],
      fileName: 'special'
    }
  }
  

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