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

Question

我正在使用 Vuetify buildModule 设置构建 Nuxt 应用程序，并希望v-col通过VueDraggable对多个s 进行排序（在我的情况下，我构建并添加了一个超小型 Nuxt 插件，该插件draggable从 VueDraggable 的默认导出绑定了一个全局组件）。在v-colS的关系用一个包裹v-row，所以我使用的是draggable与组件tag="v-row"。这在运行开发服务器时运行良好（nuxt-ts在我的情况下，因为我使用 Nuxt 和 typescript 支持），但在生产模式下构建和运行时失败。

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

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

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

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

Answer 1

如果问题是由 vueDraggble 注册引起的，请尝试以下操作：

创造<project-root>/plugins/draggable.ts

import draggable from 'vuedraggable';
import Vue from 'vue';
Vue.component('draggable', Draggable);

并删除

import draggable from 'vuedraggable'

从你的.vue文件中。

并在你的nuxt.config.js添加中

export default {
// ...
  plugins: [
    { src: '~/plugins/draggable.ts', mode: 'client' }
  ]
//...
}