Behebung von Uncaught ReferenceError: Vue ist nicht mit Webpack definiert

Ich bin zu einem Workflow mit WebPack, die Code bündelt bewegen. Während der Umstellung bin ich über diesen Fehler gestolpert:

Ungefangener ReferenceError: Vue ist nicht definiert

bei eval (externes "Vue"?548a:1)

at Object. (pcp_mainbundle.js:172)

at __webpack_require__ (pcp_mainbundle.js:20)

bei eval (pcpVue.js?6cb8:1)

at Object. (pcp_mainbundle.js:196)

at __webpack_require__ (pcp_mainbundle.js:20)

bei eval (pcpMain.js?814e:1)

at Object. (pcp_mainbundle.js:189)

at __webpack_require__ (pcp_mainbundle.js:20)

at Object. (pcp_mainbundle.js:181)

10000000111a2334:47 Ungefangener TypeError: window.pcpRun ist keine Funktion

um 10000000111a2334:47

Ich habe sichergestellt, dass das Vue-Paket von npm installiert ist:

npm install vue -save

(das sind zwei Bindestriche vor dem Speichern).

Dann habe ich es wie folgt importiert:

import Vue from 'vue';

wie ich es von anderen Einfuhren gewohnt war, und wie ich es auch in einem sehr guter Udemy-Kurs von Maximilian Schwarzmüller.

Der Grund, warum es nicht funktioniert, ist wahrscheinlich, dass dieser Udemy-Kurs von vue-cli eingerichtet wird, das package.json einrichtet.

Ich habe das manuell gemacht / einen anderen Weg gewählt.

Tatsächlich vermute ich, dass "vue" dort neu definiert wird, und zwar in vue/dist/vue.esm.js

Ich habe den Hinweis hier verstanden: Webpack-Einführung in Vue.js

auflösen: { alias: { // Sicherstellen, dass der richtige Vue-Build verwendet wird 'vue$': 'vue/dist/vue.esm.js' } }

Daher könnte ich möglicherweise meine webpack.config.js aktualisieren.

Ich habe mich dafür entschieden, es einfach in meinen Import aufzunehmen, da dies Forum-Thema schlägt vor:

importiere Vue aus 'vue/dist/vue.esm.js';

Dies funktioniert jetzt bei mir, der Fehler Ungefangener ReferenceError: Vue ist nicht definiert ist weg.

Update 2.3.2020 (Lösung): Externals

Wie bereits erwähnt, war ich dabei, von manuellen Skript-Tag-Einbindungen zu einem Webpack-Prozess überzugehen. Zuvor hatte ich daher Vue mit einem Skript-Tag eingebunden.

Damit dies funktioniert und Vue nicht ZWEIMAL geladen wird, hatte ich den folgenden Workaround in webpack.config.js angewendet:

Externals: {

vue: 'Vue'

},

Dies führte dazu, dass Webpack Vue NICHT einschloss -> wann immer es eingeschlossen wurde, nahm Webpack an, dass ich es extern bereitstellen würde, was ich nicht tat.

Die Lösung besteht daher darin, den Abschnitt "Externals" aus webpack.config.js