如何在package.json中为Vite构建React项目指定自定义输出文件夹？

错误原因 #

你之前修改的命令vite build src --emptyOutDir报错，是因为Vite默认以根目录下的index.html作为入口文件，而你指定src作为入口目录时，src文件夹内通常没有index.html，导致找不到入口模块。

正确实现方法 #

有两种简单的方式可以实现自定义输出文件夹，且都能通过npm run build执行构建：

方法1：修改package.json的scripts命令

直接在vite build后添加--outDir参数指定输出目录，保留--emptyOutDir（可选，用于构建前清空输出目录）：

"scripts": {
  "dev": "vite",
  "build": "vite build --outDir=your-custom-folder --emptyOutDir"
}

把your-custom-folder替换成你想要的文件夹名称，比如dist/client、build等。

方法2：修改Vite配置文件（推荐）

在项目根目录的vite.config.js（或vite.config.ts）中配置build.outDir，这样无需修改scripts命令，更便于统一管理配置：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'your-custom-folder', // 自定义输出文件夹路径
    emptyOutDir: true // 可选：构建前自动清空输出目录
  }
})

配置完成后，直接执行npm run build即可将产物输出到指定文件夹。

特殊情况说明 #

如果你的项目入口文件index.html确实在src文件夹内，需要额外指定根目录参数：

"scripts": {
  "dev": "vite",
  "build": "vite build --root=src --outDir=../your-custom-folder --emptyOutDir"
}

不过React+Vite的默认项目结构中，index.html是放在根目录的，这种情况很少见。

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