Une brève analyse de l'endroit où se trouve la page statique compilée par vue

Vue est un framework JavaScript populaire qui nous permet de créer plus facilement des applications Web interactives. L'un des avantages de Vue est qu'il utilise un DOM virtuel pour gérer divers composants de la page Web, ce qui rend plus efficace la mise à jour des données et des vues au niveau des composants.

Cependant, lorsque nous utilisons Vue pour écrire des applications Web, nous trouverons un problème : pendant le processus de développement, les composants Vue que nous écrivons existent généralement sous la forme de fichiers .vue, et ces fichiers ne peuvent pas être utilisés directement pour la production. Dans un environnement de production, nous devons compiler ces composants dans des fichiers statiques HTML, CSS et JavaScript avant de les déployer sur un serveur Web. La question est donc : où seront placés ces fichiers statiques compilés ?

La réponse est simple : lorsque nous utilisons Vue en production, nous devons utiliser Vue CLI pour créer notre application, qui compilera automatiquement nos composants Vue dans des fichiers HTML, CSS et JavaScript statiques et les placera dans le fichier ./dist. annuaire. Ce répertoire est automatiquement généré par Vue CLI et contient toutes les ressources statiques de notre application.

Dans le répertoire ./dist, nous verrons une structure de fichiers similaire à la suivante :

dist/
├── css/
│   ├── app.1a2b3c4d.css
│   └── chunk-vendors.5e6f7g8h.css
├── js/
│   ├── app.1a2b3c4d.js
│   ├── app.1a2b3c4d.js.map
│   ├── chunk-vendors.5e6f7g8h.js
│   └── chunk-vendors.5e6f7g8h.js.map
└── index.html

Dans cette structure de fichiers, nous pouvons voir un fichier index.html, qui est notre fichier d'entrée et aussi le navigateur Le point de départ de accéder à notre application. Nous pouvons également voir un répertoire css et un répertoire js, qui contiennent respectivement les fichiers CSS et JavaScript requis par l'application. Parmi eux, une chaîne de caractères dans le nom du fichier est une valeur de hachage du code source pour faciliter la mise en cache et la mise à jour.

Nous pouvons déployer tous les fichiers du répertoire ./dist sur le serveur Web puis accéder à notre application via le navigateur. Si nous souhaitons réduire les opérations manuelles lors de l'utilisation de Vue, nous pouvons également utiliser des outils de déploiement automatisés tels que Jenkins pour créer et déployer automatiquement nos applications.

En résumé, les composants de Vue doivent être compilés via Vue CLI dans un environnement de production, et les fichiers compilés sont stockés dans le répertoire ./dist. Nous pouvons déployer les fichiers statiques du répertoire ./dist sur le serveur Web et accéder à notre application via le navigateur.

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!