多Vite配置在watch模式下运行异常：background配置未触发重建

问题分析 #

执行yarn run dev首次构建正常，但修改popup-index.html或window-index.html触发主构建（vite.config.js）重建时，dist目录下的background.global.js会被删除，核心原因：

• 主构建的build配置默认开启emptyOutDir: true，每次重建都会清空outDir（即dist目录）
• 背景页构建（vite.chrome.background.config.ts）虽设置了emptyOutDir: false，但主构建的清空操作会覆盖该设置，导致背景页生成的文件被删除

解决方案 #

步骤1：修改主构建配置，禁用目录清空 #

在vite.config.js的build选项中添加emptyOutDir: false，避免主构建重建时清空dist目录：

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

export default defineConfig({
  plugins: [react()],
  build: {
    sourcemap: true,
    emptyOutDir: false, // 新增：禁用清空输出目录
    rollupOptions: {
      input: {
        index: './window-index.html',
        popup: './popup-index.html',
      },
    },
  },
})

步骤2：验证效果 #

重新执行yarn run dev，测试以下场景：

• 修改popup-index.html或window-index.html，主构建正常重建页面文件，dist目录下的background.global.js不会被删除
• 修改src/background/background.ts，背景页构建仍会正常触发watch重建

额外优化（可选） #

如果需要让背景页构建监听更多共享文件（如公共配置、工具函数），可在vite.chrome.background.config.ts中添加watch选项指定监听路径：

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

export default defineConfig({
  plugins: [react()],
  build: {
    emptyOutDir: false,
    outDir: resolve(__dirname, 'dist'),
    sourcemap: true,
    lib: {
      formats: ['iife'],
      entry: resolve(__dirname, './src/background/background.ts'),
      name: 'background',
    },
    rollupOptions: {
      output: {
        entryFileNames: 'background.global.js',
        extend: true,
      },
    },
  },
  // 新增：监听额外文件路径
  watch: {
    include: ['src/background/**/*', 'src/shared/**/*'],
  },
})

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