vue.js - Nuxt + Vuetify + VueDraggable - 可拖动标签道具，v-row，在开发服务器中工作，但在构建/运行生产后不能

Question

我正在使用 Vuetify buildModule 设置构建一个 Nuxt 应用程序，并希望通过VueDraggablev-col使多个s 可排序（在我的情况下，我构建并添加了一个超小型 Nuxt 插件，该插件从 VueDraggable 的默认导出中绑定了一个全局组件）。s 应该用 a 包裹，所以我使用带有. 这在运行开发服务器时效果很好（在我的情况下，因为我使用的是带有 typescript 支持的 Nuxt），但是在生产模式下构建和运行时会失败。draggablev-colv-rowdraggabletag="v-row"nuxt-ts

为了说明这个问题，这里有一些关于正在发生的事情的信息。我的来源如下（即我使用 Pug）：

在开发模式下，我的 v-row 在 Vuetify 的 DOM 中正确呈现：

但是在生产模式下构建和运行时，可拖动组件实际上呈现v-row为 DOM 标签，而不是通过 Vuetify 进行渲染/解析：

有没有人知道如何确定根本原因以及如何在这里解决它？我现在可能会解决这个问题，但想知道这是否是 Nuxt 错误，或者是否有人以任何其他方式解决了这个问题。

标签： vue.jsnuxt.jsvuetify.jsdraggablevuedraggable

Answer 1

刚遇到这个问题，原来你需要VRow全局注册组件：

import { VRow } from 'vuetify/lib';

Vue.component("v-row", VRow)

在你的main.js