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

问题描述

我正在使用Vuetify buildModule setup构建Nuxt应用，并希望通过VueDraggable使v-col可以排序（在我的情况下，我构建并添加了一个超小型Nuxt插件，该插件绑定来自VueDraggable的默认导出的全局draggable组件）。 v-col应该用v-row包装，所以我在draggable中使用tag="v-row"组件。这在运行开发服务器时效果很好（在我的情况下为nuxt-ts，因为我使用的是支持Typescript的Nuxt），但是在生产模式下构建和运行时失败。

为说明问题，以下是一些有关发生的情况的信息。我的来源如下（即我使用Pug）：

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

但是在以生产模式构建和运行时，可拖动组件将字面上的v-row渲染为DOM标签，而不是通过Vuetify进行渲染/解析：

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

解决方法

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

import { VRow } from 'vuetify/lib';

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

在您的main.js

,

如果问题是由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' }
  ]
//...
}