项目背景

ts
vue 3
ant-design-vue 3
借助vite-plugin-components 使用了ant-design-vue的按需加载

报错信息

代码中引入timeRangePicker后出现错误提示

[plugin:vite:import-analysis] Failed to resolve import "ant-design-vue/es/time-range-picker/style/css" from "src/components/common/OrderSelectCon.vue". Does the file exist?

解决方案

移除依赖vite-plugin-components；并使用新的依赖unplugin-vue-components来实现按需加载。

element plus迁移示例：Migrate from vite-plugin-components

Tips：如果使用的ui组件为ant-design-vue，把示例中的ElementPlusResolver替换为AntDesignVueResolver即可。

问题原因

大概率是因为vite-plugin-components存在bug，但是因为该组件库现已废弃，不再维护，故使用这个组件时就会有这个问题。

反思

注意github中issues中的问题
注意npm网站上依赖的告警信息
问题得到解决时，第一时间确认存在问题的版本与问题解决的版本，是否需要更新本地的依赖 如果像很多人使用的依赖，比如ant-design-vue中的issues没有发现类似问题，需要转变思路，可能是其他地方出了问题：比如本次就是按需加载ant-design-vue的问题，要求对项目熟悉程度高。

end

希望能帮到遇到同样问题的coder～