Wie konfiguriere ich Vue CLI so, dass sie verschiedene Build -Ziele (Entwicklung, Produktion) verwenden?

Wie konfiguriere ich Vue CLI für die Verwendung verschiedener Build -Ziele (Entwicklung, Produktion)?

Um VUE CLI so zu konfigurieren, dass verschiedene Build -Ziele für die Entwicklung und Produktion verwendet werden, müssen Sie Ihre Datei vue.config.js ändern. Mit dieser Datei können Sie verschiedene Konfigurationen angeben, die je nach Build -Ziel angewendet werden können. So können Sie es einrichten:

1. Erstellen oder ändern Sie vue.config.js : Wenn Sie keine vue.config.js -Datei im Stammverzeichnis Ihres Projekts haben, erstellen Sie eine. Wenn Sie bereits einen haben, addieren Sie die folgenden Konfigurationen.
2. Umgebungsspezifische Konfigurationen definieren : Verwenden Sie den process.env.NODE_ENV . Hier ist ein grundlegendes Beispiel dafür, wie Ihre Datei vue.config.js Datei aussehen könnte:

 <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>

In diesem Beispiel wird publicPath auf der Basis der Umgebung unterschiedlich eingestellt, und die chainWebpack -Methode wird verwendet, um verschiedene Webpack -Einstellungen für Entwicklung und Produktion anzuwenden.

3. Ausführen der Build -Befehle : Wenn Sie Ihre Anwendung ausführen möchten, verwenden Sie die folgenden Befehle:

   • Für die Entwicklung: <code>vue-cli-service serve</code>
   • Für die Produktion: <code>vue-cli-service build</code>

Wenn Sie Ihre vue.config.js -Datei auf diese Weise einrichten, können Sie problemlos zwischen verschiedenen Konfigurationen wechseln, die auf Entwicklungs- und Produktionsergebnisse zugeschnitten sind.

Wie kann ich zwischen Entwicklungs- und Produktionsumgebungen in Vue CLI wechseln?

Das Umschalten zwischen Entwicklungs- und Produktionsumgebungen in Vue CLI wird hauptsächlich durch die von Ihnen verwendeten Befehle und die festgelegten Umgebungsvariablen behandelt.

1. Verwenden von Befehlen :

   • Verwenden Sie den Befehl, um Ihre Anwendung im Entwicklungsmodus zu starten:

      <code>npm run serve</code>

     oder

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

   • Um Ihre Produktion zu erstellen, verwenden Sie:

      <code>npm run build</code>

     oder

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

2. Umgebungsvariablen einstellen :

   • Vue CLI verwendet process.env.NODE_ENV um die Umgebung zu bestimmen. Wenn Sie <code>vue-cli-service serve</code> ausführen, wird process.env.NODE_ENV automatisch auf 'development' eingestellt. Wenn Sie <code>vue-cli-service build</code> ausführen, ist es auf 'production' eingestellt.

   • Sie können die Umgebungsvariable NODE_ENV auch manuell einstellen, bevor Sie die Befehle ausführen. Zum Beispiel:

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

     Dadurch wird sichergestellt, dass der Build -Prozess die Produktionseinstellungen verwendet.

Durch die Verwendung dieser Befehle und möglicherweise Anpassung von Umgebungsvariablen können Sie problemlos zwischen Entwicklungs- und Produktionsumgebungen in Vue CLI wechseln.

Welche Einstellungen sollten ich in Vue CLI für die Optimierung der Produktionsergebnisse einstellen?

Um die Produktionsergebnisse in Vue CLI zu optimieren, sollten Sie sich auf mehrere wichtige Einstellungen in Ihrer Datei vue.config.js konzentrieren. Hier sind einige wichtige Einstellungen zum Anpassen:

1. Minifikation :

   • Stellen Sie sicher, dass Ihr Code abgebaut ist, um die Dateigröße zu reduzieren. Standardmäßig verwendet Vue CLI terser-webpack-plugin zur Minifikation. Sie können es in vue.config.js konfigurieren:

      <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>

     In diesem Beispiel werden auch console in der Produktion gestrichen, um die Dateigröße weiter zu reduzieren.

2. Codeaufteilung :

   • Aktivieren Sie die Codeaufteilung, um nur das erforderliche JavaScript für die aktuelle Seite zu laden. Vue CLI macht dies automatisch, aber Sie können es weiter optimieren, indem Sie die splitChunks -Einstellungen einstellen:

      <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. Baumschütteln :

   • Vue CLI ermöglicht automatisch Baumschütteln, wodurch unbenutzten Code entfernt werden. Stellen Sie sicher, dass Sie keine unnötigen Module oder Komponenten importieren, die in Produktionsbauten beseitigt werden könnten.

4. GZIP -Komprimierung :

   • Aktivieren Sie die GZIP -Komprimierung für Produktionsergebnisse, um die Größe der übertragenen Dateien weiter zu verringern. Dies kann in Ihren Servereinstellungen konfiguriert werden, kann jedoch auch in vue.config.js eingerichtet werden:

      <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. Caching :

   • Verwenden Sie Hashing in Dateinamen, um das Caching des Browsers zu nutzen. Vue CLI verwendet standardmäßig Content Hashing, wodurch sichergestellt wird, dass Browser ihre zwischengespeicherten Versionen aktualisieren, wenn sich der Inhalt ändert.

Durch das Anpassen dieser Einstellungen können Sie Ihre VUE -CLI -Produktionsergebnisse erheblich optimieren, was zu schnelleren Ladezeiten und einer besseren Leistung führt.

Wie stelle ich sicher, dass meine Entwicklung in Vue CLI Quellkarten für einfacheres Debuggen beinhaltet?

Um sicherzustellen, dass Ihre Entwicklung in Vue CLI aufbaut, enthalten Sie Quellkarten zum einfacheren Debuggen, Sie müssen Ihre Datei vue.config.js konfigurieren. Quellkarten sind standardmäßig im Entwicklungsmodus aktiviert. Sie können sie jedoch explizit wie folgt einrichten:

1. Ändern Sie vue.config.js : Stellen Sie sicher, dass Sie eine vue.config.js -Datei im Stammvermögen Ihres Projekts haben, und fügen Sie die folgende Konfiguration hinzu:

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

Die Option cheap-module-eval-source-map bietet ein gutes Gleichgewicht zwischen Build-Geschwindigkeit und Debugging-Fähigkeiten für die Entwicklung. Es umfasst Line-to-Line-Mappings, enthält jedoch keine Spaltenzuordnungen, die den Build-Prozess beschleunigen.

2. Ausführen des Entwicklungsbaues : Wenn Sie den Entwicklungsbau ausführen, verwenden Sie mit:

    <code>npm run serve</code>

   oder

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

   VUE CLI wird die development automatisch anwenden und Quellkarten wie in Ihrer Datei vue.config.js angegeben.

Durch die Verwendung dieser Konfiguration stellen Sie sicher, dass Quellkarten während der Entwicklung verfügbar sind, sodass Ihre Anwendung in den Entwickler -Tools des Browsers debuggen.

Das obige ist der detaillierte Inhalt vonWie konfiguriere ich Vue CLI so, dass sie verschiedene Build -Ziele (Entwicklung, Produktion) verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!