Nuxt Vuetify VueDraggable - перетаскиваемый тег prop, v-row, работает на сервере разработчиков, но не после сборки / запуска в производство

ProgramBox

Nuxt Vuetify VueDraggable — перетаскиваемый тег prop, v-row, работает на сервере разработчиков, но не после сборки / запуска в производство

Post author:admin
Запись опубликована:20 марта, 2023
Post category:Вопросы по программированию

#vue.js #nuxt.js #vuetify.js #draggable #vuedraggable

#vue.js #nuxt.js #vuetify.js #перетаскиваемый #vuedraggable

Вопрос:

Я создаю приложение Nuxt с настройкой Vuetify buildModule и хочу сделать несколько v-col s сортируемыми с помощью VueDraggable (в моем случае я создал и добавил очень маленький плагин Nuxt, который связывает глобальный draggable компонент из экспорта по умолчанию из VueDraggable). v-col s должно быть обернуто a v-row , поэтому я использую draggable компонент с. tag="v-row" Это хорошо работает при запуске сервера разработки ( nuxt-ts в моем случае, поскольку я использую Nuxt с поддержкой typescript), но не работает при сборке и запуске в рабочем режиме.

Чтобы проиллюстрировать проблему, вот некоторая информация о том, что происходит. Мой источник выглядит следующим образом (т. Е. Я использую Pug):

В режиме разработки мой v-row корректно отображается в DOM из Vuetify:

Но при сборке и запуске в рабочем режиме перетаскиваемый компонент буквально отображается v-row как тег DOM вместо того, чтобы проходить рендеринг / синтаксический анализ через Vuetify:

Есть ли у кого-нибудь идеи о том, как определить основную причину и как ее устранить здесь? Я, вероятно, могу обойти эту проблему на данный момент, но хочу знать, является ли это ошибкой Nuxt или кто-нибудь решил это каким-либо другим способом.

1. не уверен, применимо ли это… но можете ли вы попробовать is="v-row" вместо tag=... этого? я думаю об этом: vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats

2. Пожалуйста, предоставьте некоторую информацию о том, как вы регистрируете и импортируете v-row компонент. Очевидно, что это проблема, вызванная встряхиванием дерева.

3. Также может возникнуть проблема с регистрацией VueDraggable. И взгляните на полученное содержимое пакета. Используйте либо webpack-анализатор, либо просто текстовый поиск ( Draggable / sortablejs etc.)

4. @IvanKlochkov v-row предоставляется vuetify. Кроме того, я запустил webpack-analyzer, добавив analyzer: true в свой nuxt.config.js и я вижу и sortable.complete.esm.js то, и другое, и vuedraggable.common.js в пакете поставщика.

5. @Estradiaz Я попробовал ваше предложение, и это нарушает функциональность перетаскивания (т. Е. Это почти так, как будто оно полностью игнорирует исходный тег draggable )

Ответ №1:

Просто столкнулся с этой проблемой, оказывается, вам нужно зарегистрировать VRow компонент глобально:

 import { VRow } from 'vuetify/lib';

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

в вашем main.js

Ответ №2:

Если проблема вызвана регистрацией vuedraggable, попробуйте выполнить следующее:

Создать <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' }
  ]
//...
}

1. Прошу прощения за то, что не предоставил контекст в моем исходном сообщении, но я регистрирую пример компонента vuedraggable, как вы уже указали выше (т.Е. В draggable.js плагин и добавьте его в мой nuxt.config.js ).

2. Есть ли какие-либо ошибки в консоли браузера при запуске prod bundle? Нравится Unknown custom element: - did you register the component correctly?

3. При рендеринге DOM в консоли вообще нет ошибок браузеров.

4. Это может быть глупым обходным путем, но он должен заставить его работать. Попробуйте напрямую импортировать подобный компонент import {VRow} from 'vuetify/lib'; и добавить VRow к вашему components:{VRow,someOther} , Существует очевидная проблема с неправильным импортом или недействительной регистрацией плагина, поэтому она удаляется во время производственной сборки.

5. Ошибки в работе могут быть вызваны вашими vue.config.productionTips настройками. Я попытался импортировать вручную, как предложили Ivan и vuetify для динамического разрешения, но, к сожалению, безрезультатно. v-row не распознается и не преобразуется, особенно и только при использовании в опции тега компонента vue.draggable. Возможно, это следует упомянуть на их странице проблем github.