如何在Vite构建过程中排除指定的Vue文件夹（含懒加载目录）

完全可以在构建阶段直接排除冗余文件夹，不需要构建后手动清理，按以下步骤操作即可：

1. 排除组件自动扫描规则 #

你使用的vite-plugin-components会自动扫描指定目录下的所有Vue组件并全局注册，首先需要给插件添加排除规则，过滤示例组件：

const plugins = [
    vue(),
    ViteComponents({
        dirs: ['src/shared/components'],
        extensions: ['vue'],
        deep: true,
        // 新增排除规则，匹配你实际存放示例代码的文件夹路径即可
        exclude: [/\/examples\//]
    })
]

2. 从依赖源头切断生产环境引用 #

如果示例代码是通过懒加载路由引入的，直接在路由配置中添加环境判断，生产环境不注册示例相关的路由和依赖：

// 路由配置示例
const routes = [
  // 正式环境业务路由
  { path: '/', component: () => import('@/views/Home.vue') }
]

// 仅开发环境添加示例相关路由
if (import.meta.env.DEV) {
  routes.push({
    path: '/example',
    component: () => import('@/examples/Index.vue'),
    children: [/* 所有示例子路由 */]
  })
}

完成这一步后Rollup的自动tree shaking机制会直接剔除所有未被引用的示例代码，不会进入构建流程。

3. 可选：强制Rollup排除指定路径 #

如果存在生产代码误引用示例代码的场景，可以在build配置中添加Rollup排除规则，强制构建时忽略指定路径的文件：

const build = {
        outDir: 'dist',
        assetsDir: 'assets',
        assetsInlineLimit: '4096',
        cssCodeSplit: false, // single CSS
        sourcemap: false,
        manifest: false,
        chunkSizeWarningLimit: 1000,
        // 新增Rollup配置
        rollupOptions: {
            external: (id) => id.includes('/examples/')
        }
    }

注意事项 #

• 上述配置中的路径匹配规则请根据你实际存放示例代码的路径调整，比如示例组件存放在src/components/example下，就把匹配规则改为/\/components\/example\//
• 配置完成后重新执行npm run build，即可看到示例相关的产物不会再出现在dist目录中

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