如何解决如何在Vite应用程序中将库作为插件导入? Vite不会显示“确认”表单
我刚安装了VITE app。
如何导入vuelidate
库并用作 Vue插件以全局启用该功能。
Vite不会显示“确认”表单。
错误说:
[vite]避免深度导入“ vuelidate / lib / validators”(由 /src/App.vue),因为“ vuelidate”已被vite预先优化为 一个文件。首选直接从模块条目中导入:
从“审核”导入{...}
如果依赖项需要深度导入才能正常运行,请添加 vite.config.js中的optimizeDeps.include的深层路径。
main.js文件
import { createApp } from 'vue'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)
import App from './App.vue'
import './index.css'
createApp(App).mount('#app')
App.vue文件
<template>
<div>
<div class="form-group">
<label class="form__label">Name</label>
<input class="form__input" v-model.trim="$v.name.$model" />
</div>
<div class="error" v-if="!$v.name.required">Field is required</div>
<div class="error" v-if="!$v.name.minLength">Name must have at least {{ $v.name.$params.minLength.min }} letters.</div>
<tree-view :data="$v.name" :options="{ rootObjectKey: '$v.name',maxDepth: 2 }"></tree-view>
<div class="form-group">
<label class="form__label">Age</label>
<input class="form__input" v-model.trim.lazy="$v.age.$model" />
</div>
<div class="error" v-if="!$v.age.between">Must be between {{ $v.age.$params.between.min }} and {{ $v.age.$params.between.max }}</div>
<span tabindex="0">Blur to see changes</span>
<tree-view :data="$v.age" :options="{ rootObjectKey: '$v.age',maxDepth: 2 }"></tree-view>
</div>
</template>
<script lang="ts">
import { required,minLength,between } from "vuelidate/lib/validators";
export default {
name: "App",data() {
return {
name: "",age: 0,};
},validations: {
name: {
required,minLength: minLength(4),},age: {
between: between(20,30),};
</script>
我很确定我必须在vite.config.js中添加 optimizeDeps.include的深层路径。以全局使用vuelidate。
我在vite.config.js
文件上尝试过一些行,例如
optimizeDeps.include = "/node_modules/vuelidate/lib/validators"
说:
[vite]无法从以下位置加载配置 E:\ test \ vue \ vite.config.js:
或
optimizeDeps = "/node_modules/vuelidate/lib/validators"
在控制台上说:
未捕获的语法错误:找不到导入:minLength
https://github.com/vitejs/vite#bare-module-resolving
这是否意味着我不能将vue.use(plugin)与vite_一起使用?
解决方法
vite Github页面上显示“ Vue用户注意:Vite当前仅适用于Vue3.x。这也意味着您不能使用尚未与Vue 3兼容的库。”
Vuelidate网站的主页上有:“针对Vue.js 2.0的简单,轻量级基于模型的验证”。
因此,即使Vuelidate可以与Vue 3一起使用,Vite也不能与不兼容的库一起使用。
我想您在这里的选择是找到其他验证器,或者放弃使用Vite。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。