如何在NuxtJS开发模式下自动生成文件到dist目录

核心实现逻辑为调整前端构建工具配置，开启开发模式下的产物磁盘写入功能，同时指定输出目录为dist，配套调整dev命令的执行逻辑即可实现需求。

通用实现步骤 #

• 修改前端构建工具配置，指定构建输出路径为项目根目录的dist文件夹，同时开启开发模式下的产物写入磁盘开关
• 调整package.json中的dev命令，不需要额外手动执行生成指令即可触发产物自动更新
• 可根据性能需求开启增量写入配置，避免代码修改后全量打包带来的性能损耗

不同框架的配置示例 #

1. Vite 生态（Vue3/React+Vite等） #

修改项目根目录的vite.config.js（或.ts）：

import { defineConfig } from 'vite'

export default defineConfig({
  // 其他原有配置保留
  build: {
    outDir: 'dist' // 默认输出目录就是dist，无特殊需求可以省略
  },
  // 核心配置：开启开发模式下产物写入磁盘
  server: {
    write: true
  }
})

如果需要同时保留开发热更新能力+实时输出dist目录给NestJS调用，可以安装并发执行工具concurrently：

npm i -D concurrently

之后修改package.json的scripts配置：

{
  "scripts": {
    "dev": "concurrently \"npm run dev:original\" \"npm run build:watch\"",
    "dev:original": "替换为你原来的dev启动命令",
    "build:watch": "vite build --watch"
  }
}

2. Webpack 生态（Vue2/旧版React/CRA等） #

修改webpack.config.js配置：

const path = require('path')
module.exports = {
  // 其他原有配置保留
  output: {
    path: path.resolve(__dirname, 'dist'), // 指定输出路径为dist
  },
  devServer: {
    devMiddleware: {
      writeToDisk: true, // 核心配置：把内存中的构建产物写入磁盘
    },
  }
}

如果使用Vue CLI，修改vue.config.js即可：

module.exports = {
  outputDir: 'dist',
  devServer: {
    devMiddleware: {
      writeToDisk: true
    }
  }
}

3. Nuxt 生态 #

Nuxt3修改根目录nuxt.config.ts：

export default defineNuxtConfig({
  nitro: {
    output: {
      publicDir: 'dist'
    }
  },
  // 开启开发模式下产物写入磁盘
  vite: {
    server: {
      write: true
    }
  }
})

配置验证 #

修改前端代码后，检查dist目录下的index.html和对应静态资源是否自动更新，访问NestJS服务地址确认可以正常读取dist目录文件即可。

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