Fixação de referência Uncaught ReferenceError: Vue não é definido com webpack
Estou mudando para um fluxo de trabalho usando o WebPack, que agrupa o código. Durante a transição, eu tropecei neste erro:
Uncaught ReferenceError: Vue não está definido
em eval (Vue" externo?548a:1)
em Object. (pcp_mainbundle.js:172)
em __webpack_require__ (pcp_mainbundle.js:20)
em eval (pcpVue.js?6cb8:1)
em Object. (pcp_mainbundle.js:196)
em __webpack_require__ (pcp_mainbundle.js:20)
em eval (pcpMain.js?814e:1)
em Object. (pcp_mainbundle.js:189)
em __webpack_require__ (pcp_mainbundle.js:20)
em Object. (pcp_mainbundle.js:181)
10000000111a2334:47 Uncaught TypeError: window.pcpRun não é uma função
at 10000000111a2334:47
Assegurei-me que o pacote vue é instalado a partir da npm:
npm instalar vue -save
(estes são dois traços antes de salvar).
Então eu importei-o assim:
importar Vue de 'vue';
como eu estava acostumado com outras importações e, na verdade, como já vi em um muito bom curso Udemy por Maximilian Schwarzmüller.
A razão pela qual não funciona é provavelmente porque este curso Udemy é configurado pelo vue-cli, que configura o package.json.
Eu fiz isto manualmente / escolhi um caminho diferente.
Com efeito, suspeito que 'vue' está a ser redefinido aí, para vue/dist/vue.esm.js
Tenho aqui a dica: Webpack - Introdução ao Vue.js
determinação: { alias: { // Garantir que a Vue build correta é usada 'vue$': 'vue/dist/vue.esm.js' } }
Portanto, eu poderia possivelmente atualizar o meu webpack.config.js.
Eu escolhi simplesmente colocá-lo na minha importação, pois isto Tópico do fórum sugere:
importar Vue de 'vue/dist/vue.esm.js';
Isto agora funciona para mim, o erro Uncaught ReferenceError: Vue não está definido desapareceu.
Atualização 2.3.2020 (solução): externos
Como mencionado, eu estava fazendo a transição do script tag manual inclui para um processo de webpack. Anteriormente, portanto, eu tinha incluído a Vue usando uma tag de script.
Para que isto funcionasse, e porque não estava sendo carregado TWICE, eu tinha aplicado a seguinte solução no webpack.config.js:
externos: {
Vue: 'Vue'.
},
esta leva ao webpack NÃO incluindo o vue -> sempre que ele foi incluído, o webpack assumiu que eu iria fornecê-lo externamente, o que eu não fiz.
A solução é, portanto, remover esta secção externa de webpack.config.js