Correzione di Uncaught ReferenceError: Vue non è definito con webpack
Sto passando a un flusso di lavoro utilizzando WebPack, che raggruppa il codice. Durante la transizione, mi sono imbattuto in questo errore:
Uncaught ReferenceError: Vue non è definito
at eval (external "Vue"?548a:1)
at Object. (pcp_mainbundle.js:172)
in __webpack_require__ (pcp_mainbundle.js:20)
at eval (pcpVue.js?6cb8:1)
at Object. (pcp_mainbundle.js:196)
in __webpack_require__ (pcp_mainbundle.js:20)
a eval (pcpMain.js?814e:1)
at Object. (pcp_mainbundle.js:189)
in __webpack_require__ (pcp_mainbundle.js:20)
at Object. (pcp_mainbundle.js:181)
10000000111a2334:47 Uncaught TypeError: window.pcpRun non è una funzione
a 10000000111a2334:47
Mi sono assicurato che il pacchetto vue sia installato da npm:
npm install vue -save
(sono due trattini prima di salvare).
Poi l'ho importato in questo modo:
importa Vue da 'vue';
come ero abituato con altre importazioni, e in effetti come l'ho visto in un ottimo corso Udemy di Maximilian Schwarzmüller.
Il motivo per cui non funziona è probabilmente perché questo corso Udemy è impostato da vue-cli, che imposta package.json.
L'ho fatto manualmente / ho scelto un percorso diverso.
In effetti sospetto che 'vue' sia stato ridefinito lì, a vue/dist/vue.esm.js
Ho capito l'antifona qui: Introduzione a Webpack in Vue.js
risolvere: { alias: { // Assicurati che venga usata la giusta build di Vue 'vue$': 'vue/dist/vue.esm.js' } }
Quindi potrei eventualmente aggiornare il mio webpack.config.js.
Ho scelto di metterlo semplicemente nella mia importazione, come questo Filo conduttore del forum suggerisce:
importa Vue da 'vue/dist/vue.esm.js';
Questo ora funziona per me, l'errore Uncaught ReferenceError: Vue non è definito non c'è più.
Aggiornamento 2.3.2020 (soluzione): esterni
Come accennato, stavo passando dall'inclusione manuale di tag di script a un processo webpack. In precedenza, quindi, avevo incluso Vue usando un tag script.
Affinché questo funzioni, e Vue non venga caricato DUE VOLTE, ho applicato il seguente workaround in webpack.config.js:
esterni: {
vue: 'Vue'
},
questo ha portato webpack a NON includere vue -> ogni volta che veniva incluso, webpack presumeva che l'avrei fornito esternamente, cosa che non ho fatto.
La soluzione è quindi quella di rimuovere questa sezione externals da webpack.config.js