unplugin-vue-components 插件配置忽略部分目录下的组件自动导入

news2024/9/23 15:21:28

背景

vue3 项目为了省略第三方库ui 组件全局组件的注册代码，使用了 unplugin-vue-components 插件

原理

组件识别
在编译阶段，unplugin-vue-components 会扫描 Vue 单文件组件（.vue 文件）的模板部分，识别出所有使用的组件标签。这些标签可能是来自 UI 组件库（如 Ant Design Vue、Element Plus 等）的组件，也可能是项目内部自定义的组件。
组件解析
对于识别出的每个组件标签，unplugin-vue-components 会使用一个或多个解析器（resolver）来找到对应的组件实现。解析器可以是内置的（针对主流 UI 组件库），也可以是自定义的（针对项目内部的组件）。解析器会返回一个对象，包含组件的名称、路径和可能的副作用（如样式文件）。
自动引入
基于解析器提供的信息，unplugin-vue-components 会自动在编译后的 JavaScript 文件中插入 import 语句

注意

业务开发普通的局部组件，unplugin-vue-components 开发环境使用时要是忘记引入，插件会优先使用缓存的帮你注入。但是打包的时候就会报错，无法识别该组件。

解决

我们要告诉插件忽略某些组件的自动导入，保证开发在开发环境必须手动引入，这要就可以避免忘记引入导致打包后出现问题。

例如，有如下组件目录结构：

--component
----child-a.vue
----child-b.vue
----index.vue


······
plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        // 第三方ui库
        resolvers: [ElementPlusResolver()],
        // 排除src/components目录下的组件
        // 一个排除，可以再写几个命中
         globs: [
            'src/components/*.vue',
           '!src/components/ComponentA.vue',
         ],
      }),
    ],