宿主项目切换到组件库包之后,如果不重新配置自动导入链路,页面虽能跑,开发体验会明显退化。这一节把宿主项目的开发体验恢复到接近原模板的状态:给 unplugin-vue-components 增加自定义 resolver,让 VP* 组件自动从组件库包解析;给 unplugin-auto-import 增加自定义 imports,让 useForm、useMenu 这类 hooks 自动解析。组件库抽离完成后,宿主的“自动导入体验”不是天然保留的,它必须通过新规则重新接回。
unplugin-vue-components 的 custom resolver 解析 VP* 组件components.d.ts 并重建声明文件unplugin-auto-import 显式 imports 接回组件库 hooksuseRoute 漏导入).vite 缓存、声明文件、包内容三者不同步切到组件库包后,以前模板里自动出现的组件不见了,useForm、useMenu 这类 hooks 也不再自动出现。组件库替换宿主项目,不只是“路径替换”,开发体验也得重新恢复,否则每个页面都要手动 import 组件、import hooks、修类型提示,和原模板使用习惯差距太大。这一节是在补“工程体验闭环”。
切到组件库包后
-> 运行时链路要通
-> 自动导入链路也要重新接回既然组件库已统一成 VPForm、VPMenu、VPHeader,宿主就可通过组件名前缀识别这些组件。unplugin-vue-components 官方 README 明确支持自定义 resolver,思路是:若组件名满足条件,返回 { name, from },插件就自动从对应包导入。这正是统一前缀策略的实际落地价值。
Components({
resolvers: [
(componentName) => {
if (componentName.startsWith('VP')) {
return {
name: componentName,
from: 'el-admin-components',
}
}
},
],
})配置完 resolver 后不是一切自动变好,还要继续做两件事:把原来的 Menu、Header 标签改成 VPMenu、VPHeader,把页面顶部残留的本地 import 删掉。resolver 能处理的是模板中的组件标签,它不能替你批量重命名页面标签、自动清理旧 import 语句、修复旧逻辑里的其他路径依赖。
<template>
<VPMenu />
<VPHeader />
</template>组件已切到从 el-admin-components 导入,但宿主旧 components.d.ts 还在,里面仍引用原本地 src/components 内容,会出现“页面改对了、类型提示却还引用旧组件”的混乱。直接删掉旧的 components.d.ts、重启 dev server,让它重新生成,是非常正确的做法。自动生成的 d.ts 不是永远可信,取决于当前配置和缓存状态。
规则切换后
-> 删除旧 components.d.ts
-> 重启 dev server
-> 让插件重新生成声明文件unplugin-auto-import 官方 README 支持在 imports 用对象形式声明某个包里有哪些函数需要自动导入。useForm、useMenu、useAudioPlayer 就非常适合直接写进自定义 imports 配置。hooks 比组件更适合走 imports 显式映射,先用最直观的对象形式而非更复杂的 package preset。
AutoImport({
imports: [
'vue',
{
'el-admin-components': [
'useForm',
'useMenu',
'useAudioPlayer',
],
},
],
})auto-import 和 resolver 都配上了,页面仍报错,最后发现根因是组件库里的 useMenu 本身少了 useRoute 导入。自动导入配置只是把代码接进来,不会替你修组件库源码自身的逻辑漏洞。宿主真正开始通过公共 API 使用 composables 时,组件库内部遗漏的依赖就会被放大暴露。真正修复动作应回到组件库改源码、重建,再回宿主验证。
import { useRoute } from 'vue-router'改了组件库源码、宿主也重新 link 了,页面还是报旧错误,根因是三层东西可能不同步:组件库 dist、宿主 node_modules / link 结果、Vite 的 .vite 缓存和自动生成的 d.ts。通过删除 .vite、重新 build、重新启动 dev server 来强制系统回到一致状态,这是多层缓存系统的现实要求,不是玄学重启。
改包源码
-> 重新 build
-> 更新宿主依赖
-> 删除 .vite 缓存
-> 重启 dev| 问题 | 原因 | 解决方案 |
|---|---|---|
| 模板里写了 VPMenu 但还是报未注册 | 宿主没配置 custom resolver | 给 Components() 增加基于 VP 前缀的 resolver |
| components.d.ts 还是旧的本地组件声明 | 旧声明文件没有重建 | 删除旧 components.d.ts,重启 dev 让其重新生成 |
| hooks 已从组件库导出,页面仍报未定义 | 宿主没给 auto-import 配对应包映射 | 在 imports 显式加入 el-admin-components 和函数名 |
| auto-import 配好仍报 useRoute is not defined | 组件库源码的 useMenu 缺 useRoute 导入 | 回到组件库修源码、重建、刷新宿主缓存 |
| 删了本地组件目录页面直接白屏 | 自动组件导入链路断了 | 先接上 custom resolver,再做页面标签与 import 替换 |
| 改完组件库源码宿主仍是旧行为 | dist、link、.vite、d.ts 不同步 | 重新 build、刷新 link、删缓存、重启 dev |