Comment empaqueter le projet Vue-cli ? Explication détaillée de la méthode

Vue-cli est un outil d'échafaudage qui peut nous aider à générer rapidement l'infrastructure d'un projet Vue. Dans le développement réel, afin de faciliter le déploiement, nous devons regrouper le projet Vue dans un fichier statique et le télécharger sur le serveur. Cet article explique comment empaqueter les projets Vue-cli.

1. Commande d'empaquetage
Entrez la commande suivante dans le terminal ou la ligne de commande pour empaqueter le projet Vue-cli :

npm run build

Cette commande empaquetera notre projet Vue dans un fichier statique. Une fois l’empaquetage réussi, les fichiers statiques seront stockés dans le dossier dist du répertoire racine du projet.

2. Configuration de l'empaquetage
Lors de l'empaquetage du projet Vue-cli, nous pouvons configurer le processus d'empaquetage selon les besoins. Vue-cli fournit certaines configurations par défaut, que nous pouvons remplacer en modifiant les fichiers de configuration de Vue-cli.

1. Modifier le répertoire de sortie
   Par défaut, les fichiers statiques packagés seront stockés dans le dossier dist sous le répertoire racine du projet. Si vous devez stocker des fichiers statiques dans d'autres répertoires, nous pouvons modifier la valeur de l'attribut outputDir dans config/index.js, par exemple :

module.exports = {
    //...
    outputDir: 'static'
}

Cette configuration stockera les fichiers statiques dans le dossier statique du répertoire racine du projet.

2. Modifier le chemin du fichier statique
   Par défaut, le chemin du fichier statique emballé est un chemin relatif. Si nous devons modifier le chemin du fichier statique en chemin absolu, nous pouvons modifier la valeur de l'attribut assetsPublicPath dans. config/index.js, Par exemple :

module.exports = {
    //...
    assetsPublicPath: 'http://www.example.com/static/'
}

De cette façon, le chemin du fichier statique packagé deviendra http://www.example.com/static/.

3. Modifier le nom du fichier et le chemin du fichier
   Nous pouvons modifier le nom du fichier emballé et le chemin du fichier en modifiant les attributs filename et chunkFilename dans le fichier config/prod.env.js. Par exemple :

module.exports = {
    NODE_ENV: '"production"',
    filename: 'js/[name].[chunkhash].js',
    chunkFilename: 'js/[id].[chunkhash].js'
}

Cette configuration stockera les fichiers JS packagés dans le répertoire dist/js et le nom du fichier est généré par hachage.

3. Résumé
Cet article explique comment utiliser Vue-cli pour empaqueter des projets Vue. Nous pouvons personnaliser le processus d'empaquetage en modifiant le fichier de configuration, notamment en modifiant le répertoire de sortie, en modifiant le chemin du fichier statique et en modifiant le nom du fichier et le chemin du fichier. J'espère que cet article vous sera utile.

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!