Vue.js项目中如何在Vite和Rollup中排除指定文件夹？

你当前配置的核心问题在于：@vitejs/plugin-vue和@rollup/plugin-typescript的exclude选项，作用是让插件不处理对应格式的文件（比如不编译skin2下的.vue或.ts文件），而非让Vite/Rollup跳过整个目录的打包操作。而且你写的glob路径也存在匹配错误，导致规则未生效。

一、修正现有插件的exclude规则（仅跳过编译，不阻止打包） #

如果你的需求只是不编译skin2目录下的Vue/TS文件，可按以下方式修正路径：

plugins: [vue({
  // 匹配skin2目录下所有.vue文件
  exclude: ['**/skin2/**/*.vue'],
})],
// ...
rollupOptions: {
  // ...
  plugins: [
    typescript({
      // 匹配skin2目录下所有.ts/.tsx文件
      exclude: ['**/skin2/**/*.ts', '**/skin2/**/*.tsx'],
    }),
  ],      
},

二、完全跳过skin2目录的打包操作 #

如果你的目标是让Vite完全不打包skin2目录下的任何内容，分两种场景处理：

场景1：skin2目录未被项目代码引用

Rollup是基于依赖树打包的，只要项目中没有任何代码（直接/间接）导入skin2下的文件，Vite默认不会打包这些内容。若仍被打包，检查是否存在以下情况：

• 代码中不小心引用了skin2的文件
• skin2目录被放在public下（public目录的文件会被直接复制到dist，不受依赖树控制）

场景2：skin2目录被引用，但需强制跳过打包（谨慎使用）

这种情况会导致运行时找不到对应模块，仅适用于你确定这些代码不会被执行的场景：

1. 安装rollup-plugin-ignore插件：

npm install rollup-plugin-ignore --save-dev

2. 在vite.config.js中配置该插件：

const ignore = require('rollup-plugin-ignore');
// ...
build: {
  rollupOptions: {
    // ...
    plugins: [
      typescript({
        exclude: ['**/skin2/**/*.ts', '**/skin2/**/*.tsx']
      }),
      // 忽略skin2目录下所有文件
      ignore(['**/src/skins/skin2/**'])
    ]
  }
}

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