Correction de Uncaught ReferenceError : Vue n'est pas défini avec webpack

Je suis en train de passer à un flux de travail utilisant WebPack, qui regroupe le code. Pendant la transition, je suis tombé sur cette erreur :

Erreur de référence non rencontrée : Vue n'est pas défini

at eval (externe "Vue"?548a:1)

at Object. (pcp_mainbundle.js:172)

at __webpack_require__ (pcp_mainbundle.js:20)

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

at Object. (pcp_mainbundle.js:196)

at __webpack_require__ (pcp_mainbundle.js:20)

at 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 Uncaught TypeError : window.pcpRun n'est pas une fonction

à 10000000111a2334:47

Je me suis assuré que le paquet vue est installé depuis npm :

npm install vue -save

(il s'agit de deux tirets avant de sauvegarder).

Puis je l'ai importé comme ceci :

import Vue de 'vue' ;

comme j'avais l'habitude de le faire avec d'autres importations, et même comme je l'ai vu dans un pays de l'Union européenne. très bon cours Udemy par Maximilian Schwarzmüller.

La raison pour laquelle cela ne fonctionne pas est probablement que ce cours Udemy est configuré par vue-cli, qui configure package.json.

Je l'ai fait manuellement / j'ai choisi un autre chemin.

En effet, je soupçonne que 'vue' est redéfini ici, en vue/dist/vue.esm.js.

J'ai compris l'allusion ici : Introduction de Webpack dans Vue.js

resolve : { alias : { // S'assurer que la bonne version de Vue est utilisée 'vue$' : 'vue/dist/vue.esm.js' } } }

Je pourrais donc éventuellement mettre à jour mon webpack.config.js.

J'ai choisi de le mettre simplement dans mon importation, comme ceci Fil de discussion suggère :

importe Vue de 'vue/dist/vue.esm.js' ;

Cela fonctionne maintenant pour moi, l'erreur Erreur de référence non rencontrée : Vue n'est pas défini est parti.

Mise à jour 2.3.2020 (solution) : externes

Comme mentionné, je faisais la transition entre les inclusions manuelles par tag de script et un processus webpack. Auparavant, j'avais donc inclus Vue en utilisant une balise script.

Pour que cela fonctionne, et que Vue ne soit pas chargé DEUX FOIS, j'ai appliqué la solution de contournement suivante dans webpack.config.js :

externes : {

vue : "Vue

},

cela a conduit à ce que webpack n'inclue PAS vue -> à chaque fois qu'il était inclus, webpack supposait que je le fournissais en externe, ce que je n'ai pas fait.

La solution consiste donc à supprimer cette section externe de l'annuaire. webpack.config.js