Explication détaillée des problèmes de webpack dans vue-cli 2.9.1

Vue-cli a été mis à jour récemment. Lors de son utilisation pour construire le projet, j'ai découvert qu'il manquait deux fichiers sous le fichier bulid, à savoir dev-sever.js et dev-client.js. dernière vue-cli 2.9.1 Il y a un problème avec webpack L'éditeur pense que c'est plutôt bien. Maintenant, je vais le partager avec vous et vous donner une référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

vue-cli 2.8

vue-cli 2.9.1

Pourquoi est-ce ?

Vérifions package.json

vue-cli 2.8

vue-cli 2.9 . 1

On peut voir que la version webpack dans la dernière version de vue-cli a été mise à jour vers la v3.6.0.

Maintenant qu'il a été mis à jour, réactivons les éléments de configuration du webpack.

Paramètres du navigateur de démarrage automatique Vue

Lorsque nous avons démarré npm run dev pour exécuter ce cli, nous avons constaté que le navigateur ne démarre pas tout seul

Dans ce cas, ne serait-il pas impossible de se montrer ? Non, non, c'est toujours possible, à condition de modifier les éléments de configuration

Voyons d'abord ce que notre npm run dev exécute

Continuons à regarder les scripts de package.json Configuration dev option

vue-cli 2.9.1 package.json

Par comparaison, nous savons que lorsque nous exécutons npm run dev c'est effectivement exécuté webpack-dev-server –inline –progress –config build/webpack.dev.conf.js

vue-cli 2.8 package.json

La différence avec l'exécution de npm run dev auparavant peut expliquer la raison pour laquelle il souhaite supprimer ces deux fichiers, car la dernière version de webpack est configurée pour utiliser le plug-in webpack-dev-server pour démarrer la navigation. Vous pouvez consulter l'une de ses instructions d'utilisation de l'API sur le site officiel

build/webpack.dev.conf.js et vérifier sa configuration sur le chemin d'exécution

vue-cli 2.9.1 build/ webpack .dev.conf.js

En regardant l'API, vous saurez que le paramètre open est la raison de l'ouverture du serveur de démarrage automatique, mais quoi est config.dev.autoOpenBrowser? , nous pouvons rechercher

, ce qui correspond simplement à la définition de config require est chargé, c'est-à-dire continuer à. vérifiez le chemin correspondant, qui correspond simplement à index.js sous le fichier de configuration. Dans require La valeur par défaut est que le fichier d'index en dessous correspond à index.js

config/index.js

Le autoOpenBrowser correspond ici à false, puisque nous Si vous souhaitez le changer, changez-le simplement en true. Ensuite, le service peut démarrer automatiquement après le redémarrage

Le port peut également être remplacé par le port de démarrage correspondant dans la dernière version de la configuration vue-cli, même si le port défini est occupé, il sera automatiquement utilisé dans. autres paramètres. Le port est ajouté par 1 pour démarrer le service.

Problème de configuration de l'interface APP

Puisque les deux fichiers du dossier bulid ne sont pas là, comment configurer l'interface Hungry.me ?

Avant cela, comprenons le principe de paramétrage de l'interface de l'application Are You Hungry ? Puisque les données sont obtenues directement à partir du fichier data.json, nous devons simuler une simulation pour créer une interface. Mais dans les paramètres de l'APP Hungry?, l'interface est prête au démarrage direct du service. C'est pourquoi nous pouvons accéder directement à son /api/seller et avoir les données correspondantes

vue-cli 2.9. .1

Dans les versions antérieures à vue-cli 2.9.1, les paramètres spécifiques sont définis directement dans dev-server.js dans

vue -cli 2.9.1

Méthode 1 :

Revenir au point de départ et configurer la dernière version de vue-cli Les services du navigateur sont tous dans le plug-in webpack-dev-server, puis nous le modifions dans webpack.dev.conf.js

Maintenant, notre exigence est de savoir comment s'interfacer lorsque le service est démarré Les données sont également prêtes, alors vérifions son API de plug-in. Il se trouve qu'il y a un paramètre : devServer.before

devServer.before

.

est la solution au problème. Apporter des modifications

webpack.dev.conf.js

afin que nous puissions envoyer directement les données de la requête API

this.axios.get("/api/seller").then(function(res){
 // do something
})

Méthode 2

Si vous connaissez node, vous pouvez également créer directement une interface API, activer le service node puis le projet Hungry peut accéder directement à cette interface, bien sûr, il y aura des problèmes inter-domaines et du mappage de route ici, mais webpack-dev-server peut vous aider à résoudre ce problème, principalement en définissant les paramètres devServer.proxy pour le mappage de route, etc.

Cependant, vous devez toujours tenir compte de vos propres capacités. Je vous recommande d'utiliser la première méthode

Résumé

Front-end. la technologie se met à jour si rapidement, nous ferions mieux de le faire tous les jours. Nous devons tous acquérir les connaissances correspondantes. L'essentiel est que si la couche inférieure peut comprendre ces problèmes à fond, nous pouvons les résoudre en conséquence.

Recommandations associées :

Comment utiliser vue-cli pour développer des applications multipages

vue-cli crée rapidement des applications vue et implémente webpack Explication détaillée de l'empaquetage

Comment utiliser vue-cli pour créer des projets Vue et webpack ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!