Cette fois, je vais vous présenter la méthode de conversion d'un échafaudage d'une seule page vue+cli en un échafaudage multipage. Quelles sont les précautions pour convertir un échafaudage d'une seule page vue+cli en multi. -page échafaudage. Voici le combat réel. Jetons un coup d'œil au cas.
L'outil de génération de projet officiellement fourni, vue-cli, ne prend pas en charge les webApp multipages, mais dans les projets réels, nous avons besoin d'un tel échafaudage. Nous nous référons aux méthodes de nombreux experts. Voici une méthode pour laquelle je suis. la conversion d'un échafaudage d'une seule page en un échafaudage de plusieurs pages est pour votre référence. Veuillez me corriger si j'ai des points négatifs.
Préparation
Utilisez vue-cli pour générer l'échafaudage de projet d'une seule page dont vous avez besoin, puis nous commencerons notre projet de modification.
Processus de reconstruction
Étape 1 Changer la structure des répertoires
étape 1 Créez un nouveau dossier de vues sous le répertoire src, puis créez un nouveau dossier d'index sous le dossier de vues
étape 2 Déplacez main.js et App.vue dans le répertoire src vers le dossier index à l'étape 1 et renommez main.js en index.
étape 3 Déplacez le dossier du routeur dans le répertoire src vers le dossier index à l'étape 1. Si vous n'utilisez pas de routeur, vous pouvez le commenter dans index.js. Je ne l'ai pas utilisé car chacune de mes pages n'est pas une application d'une seule page. , c'est donc inutile. Utilisez la fonction de routage
. étape 4 Déplacez le fichier index.html du répertoire racine vers le dossier index à l'étape 1
Étape 2 Modifier le fichier de configuration sous build
Dans un environnement de production, les fichiers js uniques seront regroupés dans des pages et les fichiers js publics seront extraits. Tout ne sera pas regroupé en un seul bloc. La structure des répertoires de fichiers après l'empaquetage est également relativement claire. Toutes les modifications sont dans le dossier build
étape 1 Modifiez utils.js, ajoutez deux fonctions, l'une est utilisée pour obtenir plusieurs entrées de la page et l'autre est utilisée pour saisir la page packagée et injecter js :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
|
Ajoutez notre méthode ci-dessus après la valeur de l'attribut des plugins. Voici l'extrait de code :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
|
. Ajoutez notre méthode ci-dessus après la valeur de l'attribut des plugins. Voici l'extrait de code :
1 2 3 4 5 6 |
|
. Configuration terminée. Il suffit de démarrer le projet normalement.
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture recommandée :
Explication détaillée des étapes de manipulation JS de la transparence des objets
le routage vue est rendu une fois actualisé en mode historique Comment gérer la page non reflétée
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!