1

我有一个新安装的VITE 应用程序。

如何导入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')

应用程序.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 中添加优化Deps.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_ 一起使用？

4

1 回答 1

0

vite Github 页面显示“Vue 用户注意：Vite 目前仅适用于 Vue 3.x。这也意味着您不能使用尚未与 Vue 3 兼容的库。”

虽然 Vuelidate 网站在其主页上有：“Vue.js 2.0 的简单、轻量级的基于模型的验证”。

因此，即使 Vuelidate 可以与 Vue 3 一起使用，Vite 也不能与不兼容的库一起使用。

我猜你的选择是找到一个不同的验证器，或者放弃使用 Vite。

于 2020-08-16T11:01:43.750 回答