使用babel-plugin-import按需引入antdv 2.2.8 InputSearch报错依赖未找到

问题根因 #

ant-design-vue @^2.2.8 版本未将 InputSearch 作为独立的顶层组件导出，该组件是 Input 组件的内置子属性，babel-plugin-import 会将你单独导入的 InputSearch 解析为请求独立的 input-search 包，因此触发依赖不存在报错。

解决方案 #

1. 修改main.js导入&注册逻辑 #

删除 InputSearch 相关的独立导入、注册代码，仅保留 Input 的注册即可，修改后的代码如下：

// main.js
import { createApp } from "vue";
import App from "./App.vue";
import { ConfigProvider, Button, Form, Input } from "ant-design-vue";

import "./styles/index.less";

const app = createApp(App);

app.use(ConfigProvider);
app.use(Button);
app.use(Form);
app.use(Input);

app.mount("#app");

2. 组件使用方式不变 #

全局注册Input后，原模板中的 <a-input-search /> 标签可直接正常使用，无需额外修改；如果是局部导入场景，使用方式如下：

import { Input } from 'ant-design-vue'
const Search = Input.Search

3. babel配置无需调整 #

你现有的 babel.config.js 配置符合按需引入要求，不需要修改。

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