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