8

我正在使用 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 错误，或者是否有人以任何其他方式解决了这个问题。

4

2 回答 2

1

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

import { VRow } from 'vuetify/lib';

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

在你的main.js

于 2021-03-28T13:53:11.213 回答
0

如果问题是由 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' }
  ]
//...
}
于 2020-09-29T19:38:04.397 回答