在vuejs3下安装vee-validate我遇到了错误

问题描述

在vuejs3下,我使用命令安装vee-validate

yarn add vee-validate@next

成功后,我运行服务器并出现错误

$ yarn run serve            
yarn run v1.22.5
$ vue-cli-service serve
 INFO  Starting development server...
98% after emitting copyPlugin
ERROR  Failed to compile with 1 errors                                                                                                                                                                   
    2:07:01 PM

This dependency was not found:

* vee-validate/dist/rules in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/auth/Login.vue?vue&type=script&lang=js

To install it,you can run: npm install --save vee-validate/dist/rules
Error from chokidar (/mnt/_work_sdb8/wwwroot): Error: Circular symlink detected: "/mnt/_work_sdb8/wwwroot/wwwroot" points to "/mnt/_work_sdb8/wwwroot"

我将来自vuejs 2应用程序的代码粘贴为:

<script>
  import { bus } from '../../../src/main'
  import appMixin from '@/appMixin'

  import { ValidationObserver,ValidationProvider,extend } from 'vee-validate'
  import * as rules from 'vee-validate/dist/rules'

  Object.keys(rules).forEach(rule => {
    extend(rule,rules[rule])
  })

  export default {
    name: 'loginPage',mixins: [appMixin],components: {
      ValidationObserver,ValidationProvider
    },

但是请在这里https://github.com/logaretm/vee-validate阅读 我看不到必须对vuejs 3进行语法更改吗?

package.json:
{
  "name": "yt3","version": "0.1.0","private": true,"scripts": {
    "serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint"
  },"dependencies": {
    "axios": "^0.20.0-0","core-js": "^3.6.5","mitt": "^2.1.0","moment-timezone": "^0.5.31","node-sass": "^4.12.0","sass-loader": "^10.0.4","vee-validate": "^4.0.0-beta.16","vue": "^3.0.0","vue-router": "^4.0.0-rc.1","vuex": "^4.0.0-rc.1"
  },"devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0","@vue/cli-plugin-eslint": "~4.5.0","@vue/cli-service": "~4.5.0","@vue/compiler-sfc": "^3.0.0","@vue/eslint-config-standard": "^5.1.2","babel-eslint": "^10.1.0","eslint": "^6.7.2","eslint-plugin-import": "^2.20.2","eslint-plugin-node": "^11.1.0","eslint-plugin-promise": "^4.2.1","eslint-plugin-standard": "^4.0.0","eslint-plugin-vue": "^7.0.0-0"
  },"eslintConfig": {
    "root": true,"env": {
      "node": true
    },"extends": [
      "plugin:vue/essential","eslint:recommended"
    ],"parserOptions": {
      "parser": "babel-eslint"
    }
  }
}

修改块: 我加了行

 "vee-validate": "^3.1.0" 

在package.json文件中并运行命令

 yarn

 yarn run serve

浏览器控制台出现错误

vee-validate.esm.js?7bb1:867 Uncaught TypeError: vue__WEBPACK_IMPORTED_MODULE_0__.default is not a constructor
    at eval (vee-validate.esm.js?7bb1:867)
    at Module../node_modules/vee-validate/dist/vee-validate.esm.js (chunk-vendors.js:3389)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader-v16/dist/index.js?!./src/components/auth/Login.vue?vue&type=script&lang=js:10)
    at Module../node_modules/cache-

看起来vee-validate 3和vuejs 3不兼容吗?
您会为vuejs 3推荐哪些验证工具?

谢谢!

解决方法

有关Github Migration Guide for version 4的一些评论:

  • 由于API完全不同,因此没有直接升级途径
  • 即使让人们知道v4适用于Vue 3,v3适用于Vue2也会对人们有用

SO:vee-validate的V4仅适用于Vue 3,并且具有与V3完全不同的API(仅适用于Vue 2)

同样从V4 guide起,他们似乎决定放弃内置验证器,转而使用yup

这样的专用库。

因此,使用现有Vue 2应用中的任何代码都没有任何意义-如果您正在使用Vue 3:

  • vee-validate:使用V4指南,并使用新的API再次编写代码...。
  • 准备好很多已建立的库还没有适用于Vue 3的稳定版本....这就是我至少要保留在Vue 2上的原因任何严肃的项目需要6个月的时间(一边玩Vue 3)

相关问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其...
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。...
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbc...