Ik ga over op een workflow met WebPack, die code bundelt. Tijdens de overgang, kwam ik deze fout tegen:

Uncaught ReferenceError: Vue is niet gedefinieerd

bij eval (extern "Vue"?548a:1)

at Object. (pcp_mainbundle.js:172)

bij __webpack_require__ (pcp_mainbundle.js:20)

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

at Object. (pcp_mainbundle.js:196)

bij __webpack_require__ (pcp_mainbundle.js:20)

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

at Object. (pcp_mainbundle.js:189)

bij __webpack_require__ (pcp_mainbundle.js:20)

at Object. (pcp_mainbundle.js:181)

10000000111a2334:47 Uncaught TypeError: window.pcpRun is geen functie

op 10000000111a2334:47

Ik heb ervoor gezorgd dat het vue pakket is geïnstalleerd vanuit npm:

npm install vue -save

(dit zijn twee streepjes voor save).

Toen heb ik het zo geïmporteerd:

importeer Vue uit 'vue';

zoals ik gewend was van andere importen, en inderdaad zoals ik het heb gezien in een zeer goede Udemy cursus door Maximilian Schwarzmüller.

De reden dat het niet werkt is waarschijnlijk omdat deze Udemy cursus is opgezet door vue-cli, die package.json opzet.

Ik deed dit handmatig / koos een ander pad.

In feite vermoed ik dat 'vue' daar geherdefinieerd wordt, naar vue/dist/vue.esm.js

Ik heb de hint hier: Webpack intro in Vue.js

resolve: { alias: { //Zorg ervoor dat de juiste Vue build wordt gebruikt 'vue$': 'vue/dist/vue.esm.js' } }

Daarom kon ik misschien mijn webpack.config.js updaten.

Ik koos ervoor om het gewoon in mijn import te zetten, zoals dit Forum draad suggereert:

importeer Vue uit 'vue/dist/vue.esm.js';

Dit werkt nu voor mij, de fout Uncaught ReferenceError: Vue is niet gedefinieerd is weg.

Update 2.3.2020 (oplossing): externen

Zoals vermeld, was ik aan het overschakelen van manuele script tag includes naar een webpack proces. Voorheen had ik daarom Vue opgenomen met behulp van een script tag.

Opdat dit zou werken, en Vue niet TWEE keer zou geladen worden, had ik de volgende workaround toegepast in webpack.config.js:

uiterlijkheden: {

beeld: "beeld

},

Dit leidde ertoe dat webpack vue NIET opnam -> wanneer het werd opgenomen, nam webpack aan dat ik het extern zou verstrekken, wat ik niet deed.

De oplossing is dus om deze sectie met externe elementen te verwijderen uit webpack.config.js