如何让Vite忽略项目根目录下的service-worker目录？

问题原因 #

你用的optimizeDeps.exclude是用来控制依赖预构建的——它只告诉Vite不要把指定依赖加入预构建队列，和最终打包阶段是否生成对应文件完全无关，这就是配置没生效的核心原因。

解决方案 #

根据你的场景，任选以下一种方法即可：

方法1：移除代码中对service-worker目录的引用

如果你的项目代码（比如主入口、业务模块）里有导入service-worker/下文件的语句，Vite会自动把这些文件当作项目代码的一部分打包输出。你需要检查并删掉这类import语句。

如果要注册Service Worker，直接用原生API就行，不用让Vite打包该文件：

// 直接指定文件路径注册Service Worker
navigator.serviceWorker.register('/service-worker.js')

要是需要把service-worker目录的文件部署到dist目录，可以手动复制，或者在package.json的scripts里加个复制命令：

{
  "scripts": {
    "build": "vite build && cp -r service-worker dist/"
  }
}

方法2：通过Rollup配置排除该目录

在vite.config.ts里添加Rollup配置，把service-worker目录下的所有文件标记为外部依赖，让Vite不打包它们：

import { defineConfig } from "vite";

export default defineConfig({
  build: {
    rollupOptions: {
      // 匹配service-worker目录下的所有文件
      external: [/^service-worker\/.*/],
    },
  },
});

方法3：使用Vite插件忽略目录

安装vite-plugin-ignore插件，让Vite完全跳过对该目录的处理：

1. 安装插件：

npm install vite-plugin-ignore --save-dev

2. 修改vite.config.ts：

import { defineConfig } from "vite";
import vitePluginIgnore from 'vite-plugin-ignore';

export default defineConfig({
  plugins: [
    vitePluginIgnore([/^service-worker\/.*/])
  ],
});

验证 #

执行以下命令测试效果：

rm dist/service-worker.js; npx vite build; ls -la dist/service-worker.js

如果配置生效，最后一条命令会提示dist/service-worker.js不存在。

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