引入vee-validate的ValidationProvider时报无导出成员错误如何解决

错误产生原因 #

• vee-validate v3.x的默认核心构建包仅导出验证相关的核心API（比如extend），不会默认导出ValidationProvider、ValidationObserver这两个组件类，所以直接从vee-validate根路径导入这两个组件会触发导出项不存在的错误。
• 你当前代码中components配置项里注册了ValidationObserver，但没有写对应的导入语句，即使解决了路径问题也会触发额外的未定义报错。

修复方案 #

方案1：调整组件导入路径（推荐，按需引入体积更小） #

修改ContactForm.vue中的导入语句，从组件专属的导出路径引入两个组件：

import { Vue, Component} from 'nuxt-property-decorator';
// 调整导入路径
import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/components';
@Component({
    name : "ContactForm",
    components: {
        ValidationProvider, 
        ValidationObserver
    }
})

方案2：使用全量构建包 #

如果需要用到vee-validate的所有内置能力，也可以直接导入全量构建包，所有需要的API都可以从全量包路径直接导入：

import { extend, ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full.esm';

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