Vue3导入vee-validate组件时报default不是构造函数错误如何解决？

你的报错由两个问题共同导致：

• 版本不兼容：当前安装的vee-validate为适配Vue2的v3版本，该版本依赖Vue2默认导出的全局构造函数实现逻辑，但Vue3已取消该默认导出，因此调用时抛出构造函数不存在的错误
• 代码笔误：初始main.js中调用Vue实例创建方法时，你导入的是createApp，但实际写的是create(App)，方法名调用错误

按照以下步骤操作即可解决：

1. 卸载旧版本vee-validate，安装适配Vue3的v4版本
   执行命令：

   npm uninstall vee-validate
   npm install vee-validate@4
   

2. 调整导入与注册逻辑
   vee-validate v4中已将原ValidationProvider重命名为Field，ValidationObserver重命名为Form，如果需要全局注册使用，修改main.js代码如下：

   import { createApp } from "vue";
   import App from "./App.vue";
   import router from "./router";
   import "bootstrap";
   import "./assets/stylesB.css";
   // 导入vee-validate v4对应组件
   import { Field, Form } from "vee-validate";
   
   // 修正实例创建方法名，提前存为app变量
   const app = createApp(App);
   // 全局注册组件，可直接在模板中使用
   app.component("Field", Field);
   app.component("Form", Form);
   app.use(router).mount("#app");
   

   如果你不想修改现有模板中ValidationProvider、ValidationObserver的标签名，也可以在注册时保留原名：

   app.component("ValidationProvider", Field);
   app.component("ValidationObserver", Form);
   

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