Comment configurer VUE CLI pour utiliser différentes cibles de construction (développement, production)?

Comment configurer VUE CLI pour utiliser différentes cibles de construction (développement, production)?

Pour configurer VUE CLI pour utiliser différentes cibles de construction pour le développement et la production, vous devez modifier votre fichier vue.config.js . Ce fichier vous permet de spécifier différentes configurations qui peuvent être appliquées en fonction de la cible de construction. Voici comment vous pouvez le configurer:

1. Créer ou modifier vue.config.js : Si vous n'avez pas de fichier vue.config.js dans le répertoire racine de votre projet, créez-en un. Si vous en avez déjà un, assurez-vous d'ajouter les configurations suivantes.
2. Définissez des configurations spécifiques à l'environnement : utilisez la variable process.env.NODE_ENV pour différencier les environnements de développement et de production. Voici un exemple de base de ce à quoi pourrait ressembler votre fichier vue.config.js :

 <code class="javascript">module.exports = { // Configuration that applies to both environments publicPath: process.env.NODE_ENV === 'production' ? '/production-subdirectory/' : '/', // Other configurations... // ChainWebpack is used to modify the internal webpack configuration chainWebpack: config => { if (process.env.NODE_ENV === 'production') { // Production-specific webpack configurations config.optimization.minimize(true); // Other production-specific optimizations... } else { // Development-specific webpack configurations config.devtool('cheap-module-eval-source-map'); // Other development-specific settings... } } };</code>

Dans cet exemple, publicPath est défini différemment en fonction de l'environnement, et la méthode chainWebpack est utilisée pour appliquer différents paramètres de webpack pour le développement et la production.

3. Exécution des commandes de construction : Lorsque vous souhaitez exécuter votre application, utilisez les commandes suivantes:

   • Pour le développement: <code>vue-cli-service serve</code>
   • Pour la production: <code>vue-cli-service build</code>

En configurant votre fichier vue.config.js de cette manière, vous pouvez facilement basculer entre différentes configurations adaptées aux versions de développement et de production.

Comment puis-je basculer entre les environnements de développement et de production dans Vue CLI?

La commutation entre les environnements de développement et de production dans VUE CLI est principalement gérée par les commandes que vous utilisez et les variables d'environnement définies.

1. Utilisation des commandes :

   • Pour démarrer votre application en mode développement , utilisez la commande:

      <code>npm run serve</code>

     ou

      <code>vue-cli-service serve</code>

   • Pour créer votre application de production , utilisez:

      <code>npm run build</code>

     ou

      <code>vue-cli-service build</code>

2. Définition des variables d'environnement :

   • Vue CLI utilise process.env.NODE_ENV pour déterminer l'environnement. Lorsque vous exécutez <code>vue-cli-service serve</code> , process.env.NODE_ENV est automatiquement défini sur 'development' . Lorsque vous exécutez <code>vue-cli-service build</code> , il est défini sur 'production' .

   • Vous pouvez également définir manuellement la variable d'environnement NODE_ENV avant d'exécuter les commandes. Par exemple:

      <code>NODE_ENV=production vue-cli-service build</code>

     Cela garantira que le processus de construction utilise les paramètres de production.

En utilisant ces commandes et en ajustant éventuellement des variables d'environnement, vous pouvez facilement basculer entre les environnements de développement et de production dans Vue CLI.

Quels paramètres dois-je ajuster dans Vue CLI pour optimiser les versions de production?

Pour optimiser les constructions de production dans VUE CLI, vous devez vous concentrer sur plusieurs paramètres clés dans votre fichier vue.config.js . Voici quelques paramètres importants à régler:

1. Minification :

   • Assurez-vous que votre code est minifié pour réduire la taille du fichier. Par défaut, Vue CLI utilise terser-webpack-plugin pour la minification. Vous pouvez le configurer dans vue.config.js :

      <code class="javascript">module.exports = { chainWebpack: config => { config.optimization.minimize(true); config.optimization.minimizer('terser').tap(args => { args[0].terserOptions.compress.drop_console = true; return args; }); } };</code>

     Cet exemple supprime également les instructions console en production pour réduire davantage la taille du fichier.

2. Fractionnement de code :

   • Activez le fractionnement de code pour charger uniquement le JavaScript nécessaire pour la page actuelle. Vue CLI le fait automatiquement, mais vous pouvez l'optimiser davantage en ajustant les paramètres splitChunks :

      <code class="javascript">module.exports = { chainWebpack: config => { config.optimization.splitChunks({ chunks: 'all', minSize: 30000, maxSize: 0, minChunks: 1, maxAsyncRequests: 5, maxInitialRequests: 3, automaticNameDelimiter: '~', name: true, cacheGroups: { defaultVendors: { test: /[\\/]node_modules[\\/]/, priority: -10 }, default: { minChunks: 2, priority: -20, reuseExistingChunk: true } } }); } };</code>

3. Tremblement d'arbre :

   • Vue CLI permet automatiquement la secousse des arbres, qui supprime le code inutilisé. Assurez-vous que vous n'importez pas de modules ou de composants inutiles qui pourraient être éliminés dans les versions de production.

4. Compression GZIP :

   • Activer la compression GZIP pour les versions de production afin de réduire davantage la taille des fichiers transférés. Cela peut être configuré dans les paramètres de votre serveur, mais peut également être configuré dans vue.config.js :

      <code class="javascript">const CompressionWebpackPlugin = require('compression-webpack-plugin'); module.exports = { configureWebpack: config => { if (process.env.NODE_ENV === 'production') { return { plugins: [new CompressionWebpackPlugin({ test: /\.js$|\.css$/, threshold: 10240, minRatio: 0.8 })] }; } } };</code>

5. Cache :

   • Utilisez le hachage dans les noms de fichiers pour profiter de la mise en cache du navigateur. Vue CLI utilise le hachage de contenu par défaut, ce qui permet de garantir que les navigateurs mettent à jour leurs versions en cache lorsque le contenu change.

En ajustant ces paramètres, vous pouvez optimiser considérablement vos versions de production Vue CLI, ce qui entraîne des temps de chargement plus rapides et de meilleures performances.

Comment puis-je m'assurer que mon développement construit dans Vue CLI inclut des cartes source pour un débogage plus facile?

Pour vous assurer que votre développement construit dans VUE CLI inclut les cartes source pour un débogage plus facile, vous devez configurer votre fichier vue.config.js . Les cartes source sont activées par défaut en mode développement, mais vous pouvez les configurer explicitement comme suit:

1. Modifier vue.config.js : assurez-vous que vous disposez d'un fichier vue.config.js à la racine de votre projet et ajoutez la configuration suivante:

 <code class="javascript">module.exports = { chainWebpack: config => { if (process.env.NODE_ENV === 'development') { config.devtool('cheap-module-eval-source-map'); } } };</code>

L'option cheap-module-eval-source-map fournit un bon équilibre entre la vitesse de construction et les capacités de débogage pour le développement. Il comprend des mappages de ligne à ligne mais n'inclut pas les mappages de colonnes, ce qui accélère le processus de construction.

2. Exécution de la construction de développement : lorsque vous exécutez la construction de développement en utilisant:

    <code>npm run serve</code>

   ou

    <code>vue-cli-service serve</code>

   Vue CLI appliquera automatiquement la configuration development et inclura les cartes source comme spécifié dans votre fichier vue.config.js .

En utilisant cette configuration, vous vous assurez que les cartes source sont disponibles pendant le développement, ce qui facilite le débogage de votre application dans les outils de développement du 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!