如何解决在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)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。