【前端】vue项目同时引入elementUI和ant-design后，导致打包失败的解决方案。

Posted 2023-03-21

参考技术A VUE同时引入elementUI和ant-design后，可正常运行，但会导致打包失败，且在启动时会输出错误语句。

无论组件库是否按需引入，在打包或启动时都会报以下错误：

Subsequent property declarations must have the same type. Property ‘$confirm’ must be of type ‘(modalOptios: ModalOptions) => ModalConfirm’, but here has type ‘ElMessageBoxShortcutMethod’.

Subsequent property declarations must have the same type. Property ‘$message’ must be of type ‘Message’, but here has type ‘ElMessage’.

解决方案：

找到目录： node_modules/element-ui/types/message-box.d.ts

注释图片中的内容

找到目录 node_modules/element-ui/types/message.d.ts

注释图片中的内容

vue-cli引入element和vant前端ui组件

参考技术A

官方文档

npm安装element插件

方法一：完整引入，但样式文件需单独引入

方法二：按需引入

1.安装babel-plugin-component插件

2.配置到babel.config

引入组件

官方文档

方法一：按需引入（不要误解了官方的自动按需引入，还是要手动写的）

1.安装babel-plugin-import插件

2.配置到babel.config

3.导入到vue中

方法二：全部导入

element和vant不适合一起使用，element更适合用在pc端而vant适合用在移动端，根据项目不同选择使用不同的UI框架