Où est la vue après emballage ?

Vue.js est actuellement le framework de développement front-end le plus populaire. Son efficacité et sa flexibilité incitent de nombreux développeurs front-end à choisir de l'utiliser pour développer des applications Web. Cependant, une fois le développement terminé, nous devons empaqueter le code afin qu'il puisse s'exécuter sur le serveur. Alors, où est la vue après emballage ?

Une fois Vue.js empaqueté, un dossier dist sera généré, qui contient tout le code HTML, CSS et JavaScript du projet. Ce dossier est ce que nous appelons « où Vue est empaqueté ».

Pour une meilleure compréhension, je présenterai ici en détail le processus d'empaquetage de Vue.js et le contenu du dossier dist.

Processus de packaging Vue.js

Vue.js fournit un outil de construction intégré appelé Vue CLI, qui peut nous aider à créer, construire et gérer des projets Vue. Une fois le projet créé, nous devons utiliser Vue CLI pour l'empaquetage. Dans ce processus, Webpack joue un rôle plus important.

Webpack est un outil de packaging de modules qui peut regrouper plusieurs fichiers JavaScript dans un seul fichier, réduisant ainsi la taille du fichier et améliorant la vitesse de chargement des pages. Dans Vue CLI, Webpack est utilisé pour regrouper le code d'un projet Vue dans un fichier JavaScript pouvant être utilisé pour la publication.

Voici le processus de base du packaging de Vue.js :

• Installer les packages de dépendances : Dans le répertoire racine du projet, exécutez la commande npm install pour installer tous les packages de dépendances, y compris Vue CLI. et Webpack. npm install 命令，安装所有的依赖包，包括 Vue CLI 和 Webpack 。
• 编写代码： 在 src 目录中编写代码。
• 执行构建命令： 运行 npm run build
• Écrire le code : Écrivez le code dans le répertoire src.

Exécutez la commande build :

Exécutez la commande npm run build pour exécuter l'opération de build. Cette opération générera un répertoire dist contenant tout le code packagé.

Publiez le code sur le serveur :

Téléchargez les fichiers du répertoire dist sur le serveur et notre projet Vue peut s'exécuter dans le navigateur.

contenu du dossier dist

Le dossier dist est le résultat du packaging du projet Vue.js. Il contient tout le code de l'ensemble du projet. Plus précisément, il contient les éléments suivants :

index.html

Il s'agit de la page d'accueil de l'application et contient les références JavaScript requises pour l'exécution de l'application monopage Vue.js.

répertoire statique

Ce répertoire contient toutes les ressources statiques, telles que les images, les polices et tous les scripts.

*Fichiers .js

Il s'agit de fichiers JavaScript packagés et le nom du fichier contient généralement une valeur de hachage ou un horodatage afin que le navigateur puisse effectuer le contrôle du cache. Ces fichiers JavaScript sont au cœur du projet Vue et contiennent du code pour les composants, les plug-ins, etc.

*.fichiers .map

Ces fichiers sont des fichiers de mappage de code source générés par Webpack lors de l'empaquetage et sont utilisés pour déboguer le code.

*Fichiers .css🎜🎜Ces fichiers sont des feuilles de style CSS utilisées dans les projets Vue. Ils sont emballés séparément des fichiers JavaScript, ce qui peut améliorer la vitesse de chargement des pages. 🎜🎜Résumé🎜🎜Dans Vue.js, l'empaquetage est un processus nécessaire, qui peut empaqueter le code que nous écrivons dans une version publiable. Dans cet article, nous présentons le processus de packaging Vue.js et le contenu du dossier dist. Veuillez noter que le dossier dist contient tout le code de notre application, vous devez donc être prudent lors de la publication de votre application. 🎜

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!