如何在 Vite 应用程序中将库作为插件导入?
Posted
技术标签:
【中文标题】如何在 Vite 应用程序中将库作为插件导入?【英文标题】:How to import libraries as plugins in a Vite application? 【发布时间】:2020-12-05 17:07:29 【问题描述】:我有一个新安装的VITE app。
如何导入 vuelidate
库并用作 Vue 插件 以全局启用该功能。
Vite 不显示“vuelidate”表单。
错误提示:
[vite] 避免深度导入“vuelidate/lib/validators”(由 /src/App.vue) 因为 "vuelidate" 已经被 vite 预先优化为 一个文件。更喜欢直接从模块条目导入:
从“vuelidate”导入 ...
如果依赖项需要深度导入才能正常运行,请添加 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_ 一起使用?
【问题讨论】:
嗨 Cem,你找到解决这个问题的方法了吗? 你不能使用尚不兼容 Vue 3 的库 【参考方案1】:vite Github 页面显示“Vue 用户注意:Vite 目前仅适用于 Vue 3.x。这也意味着您不能使用尚未与 Vue 3 兼容的库。”
虽然 Vuelidate 网站在其主页上有:“Vue.js 2.0 的简单、轻量级的基于模型的验证”。
因此,即使 Vuelidate 可以与 Vue 3 一起使用,Vite 也不能与不兼容的库一起使用。
我猜你的选择是寻找不同的验证器,或者放弃使用 Vite。
【讨论】:
我已经试过了但是基本的表格还是没有出现/Uncaught SyntaxError: import not found: minLength
以上是关于如何在 Vite 应用程序中将库作为插件导入?的主要内容,如果未能解决你的问题,请参考以下文章