Fijación de Uncaught ReferenceError: Vue no está definido con webpack

Estoy pasando a un flujo de trabajo que utiliza WebPack, que agrupa el código. Durante la transición, me encontré con este error:

Uncaught ReferenceError: Vue no está definido

en eval (¿"Vue" externo? 548a:1)

en Object. (pcp_mainbundle.js:172)

at __webpack_require__ (pcp_mainbundle.js:20)

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

en Object. (pcp_mainbundle.js:196)

at __webpack_require__ (pcp_mainbundle.js:20)

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

en Object. (pcp_mainbundle.js:189)

at __webpack_require__ (pcp_mainbundle.js:20)

en Object. (pcp_mainbundle.js:181)

10000000111a2334:47 Uncaught TypeError: window.pcpRun no es una función

en 10000000111a2334:47

Me aseguré de que el paquete vue está instalado desde npm:

npm install vue -save

(son dos guiones antes de guardar).

Entonces lo importé así:

importar Vue de 'vue';

como estaba acostumbrado con otras importaciones, y de hecho como lo he visto en un muy buen curso Udemy por Maximilian Schwarzmüller.

La razón por la que no funciona es probablemente porque este curso Udemy está configurado por vue-cli, que configura package.json.

Lo hice manualmente / elegí un camino diferente.

En efecto, sospecho que 'vue' está siendo redefinido allí, a vue/dist/vue.esm.js

He captado la pista aquí: Introducción de Webpack en Vue.js

resolver: { alias: { // Asegúrese de que se utiliza la compilación correcta de Vue 'vue$': 'vue/dist/vue.esm.js' } }

Por lo tanto, posiblemente podría actualizar mi webpack.config.js.

Opté por ponerlo simplemente en mi importación, ya que este Hilo del foro sugiere:

import Vue from 'vue/dist/vue.esm.js';

Esto ahora me funciona, el error Uncaught ReferenceError: Vue no está definido se ha ido.

Actualización 2.3.2020 (solución): externos

Como ya he mencionado, estaba pasando de incluir manualmente la etiqueta de script a un proceso de webpack. Por lo tanto, anteriormente había incluido Vue utilizando una etiqueta de script.

Para que esto funcione, y que Vue no se cargue DOS veces, he aplicado la siguiente solución en webpack.config.js:

externos: {

vue: 'Vue'

},

esto llevó a que webpack NO incluyera vue -> siempre que se incluía, webpack asumía que yo lo proporcionaría externamente, cosa que no hice.

La solución es, por tanto, eliminar esta sección externa de webpack.config.js