如何在 nuxt 中安装和配置 vee-validate (v4)？答案

【问题标题】：How to install and configure vee-validate (v4) in nuxt?如何在 nuxt 中安装和配置 vee-validate (v4)？
【发布时间】：2021-01-28 15:58:47
【问题描述】：

我很难理解将这个很棒的插件安装到 nuxt 的文档。据我了解，我很难相信，您必须将所有规则导出到插件文件中。我尝试导出一些规则，但是 nuxt 不知道 ValidationObserver 组件是什么。

【问题讨论】：

标签： nuxt.js vee-validate

【解决方案1】：

我通过执行以下操作将 vee-validate v3 安装到 Nuxt：

npm install --save vee-validate

将此添加到nuxt.config.js 中的“插件”部分：

plugins: [
    { src: '~/plugins/vee-validate.js', ssr: true },
],

将此添加到nuxt.config.js 中的“构建”部分：

build: {
    transpile: ['vee-validate']
}

需要转译部分来消除有关Unexpected token 'export' 的错误。它做了一些与 ES6 和 Babel 相关的事情，可能会在将库加载到 Nuxt 之前对其进行预编译。

这是我的 vee-validate.js 文件在插件目录中的样子：

import { extend, localize } from "vee-validate";
import { required, email, min } from "vee-validate/dist/rules";

const dictionary = {
    en: {
        messages: {
            required: () => '* Required',
        },
    },
};

// Install required rule.
extend("required", required);

// Install email rule.
extend("email", email);

// Install min rule.
extend("min", min);

localize(dictionary);

【讨论】：

如果我使用开发服务器yarn dev，我的验证工作。但是，在使用yarn generate or npm run generate 的静态站点生成器模式下，验证消失了。即使是ssr:true。奇怪的是，我尝试使用 Gitlab 页面进行部署，并且可以正常工作。但是，在其他托管服务器中复制公用文件夹不起作用。你知道如何解决这个问题吗？
尝试将其添加到您的 nuxt.config.js 文件中： build: { transpile: ['vee-validate'], }
不幸的是，它仍然不起作用。 `build: { transpile: ['vee-validate'], }` 和 `build: { transpile: ['vee-validate/dist/rules'], }` 都不起作用。我在 $PROJECT_DIR/plugins/vee_validate.js 中为它创建了一个插件。
我不知道该怎么办
您是否有使用 vee-validate 进行静态站点部署的项目参考或 Github 存储库？

【解决方案2】：

VeeValidate v4 与 Vue 2.x 不兼容，这意味着它不适用于 Nuxt 2.x，因为 vee-validate (v4) 仅针对 Vue 3 支持。

通常，使用 vee-validate v3，您确实需要在插件文件中注册您的规则，并在全局范围内注册 validation-observer 和 validation-provider 或在需要时导入它们。

【讨论】：

在使用 nuxt-composition-api 时也不行？
不，它依赖于仅存在于 Vue 3 中的新反应系统