vue-cli-Konfigurationsdatei (ausführliches Tutorial)

In diesem Artikel wird hauptsächlich die Konfiguration des Webpacks in vue-cli erläutert. In diesem Artikel werden hauptsächlich der relevante Code im Konfigurationsordner und die Dateistruktur von config analysiert

I Ich habe mich kürzlich mit Webpack beschäftigt und wollte plötzlich sehen, wie Webpack in Vue-Cli konfiguriert wird. Ich habe viele verwandte Artikel gelesen und mir auch ein paar Dinge über die Vue-Cli-Konfiguration ausgedacht. Wie das Sprichwort sagt: „Wenn Sie Ihre Arbeit gut machen wollen, müssen Sie zuerst Ihre Werkzeuge schärfen“! Dieser Artikel analysiert hauptsächlich den relevanten Code im Konfigurationsordner in vue. Schauen wir uns zunächst die Dateistruktur von config an:

|-config
|---dev.env.js
|---index.js
|---prod.env.js

Öffnen Sie unseren Vue-Projektordner und wir können ihn klar verstehen Sie können drei Dateien im Ordner sehen: „dev.env.js“, „index.js“, „prod.env.js“. Öffnen wir zunächst die Datei prod.env.js und schauen uns den Inhalt an:

'use strict'
module.exports = {
 NODE_ENV: '"production"'
}

Der Inhalt von prod.env.js ist sehr einfach. Es wird lediglich ein Objekt exportiert, das besagt, dass die Ausführungsumgebung „Produktion (Produktionsumgebung)“ ist. Schauen wir uns die entsprechende „dev.env“ .js an. Datei:

'use strict'
//引入webpack-merge模块
const merge = require('webpack-merge')
//引入刚才打开的prod.env.js
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"'
})

In „dev.env.js“ wird erstmals das Webpack-Merge-Modul eingeführt. Die Funktion dieses Moduls besteht darin, zwei Konfigurationsdateiobjekte zusammenzuführen und eine neue Konfigurationsdatei zu generieren, die in gewisser Weise dem object.assign() von es6 ähnelt.

vue-cli extrahiert einige gängige Konfigurationen und fügt sie in eins ein Datei, konfigurieren Sie verschiedene Codes für verschiedene Umgebungen und verwenden Sie schließlich Webpack-Merge, um doppelten Code zusammenzuführen und zu reduzieren. In der Dokumentation heißt es: „Webpack folgt dem Prinzip der Nichtwiederholung (Wiederholen Sie sich nicht – DRY). Das werden Sie nicht Konfigurieren Sie den gleichen Code in verschiedenen Umgebungen und die neue Konfiguration, die die Entwicklungsumgebung (Entwicklung) angibt, werden zusammengeführt. (Ich verstehe nicht ganz, warum das gemacht wird. Es ist in Ordnung, module.exports

direkt ohne Zusammenführung zu schreiben. Ist es für ein ordnungsgemäßes Downgrade?)

Es gibt noch einen weiteren Punkt zu beachten: Ja, Entwicklung und Produktion muss in doppelte Anführungszeichen gesetzt werden, sonst wird ein Fehler gemeldet! ! !

={NODE_ENV:'"development'}Schauen wir uns zum Schluss index.js an:

'use strict'
// Template version: 1.2.4
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
 dev: {
 // Paths
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 proxyTable: {},
 // Various Dev Server settings
 host: 'localhost', // can be overwritten by process.env.HOST
 port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
 autoOpenBrowser: false,
 errorOverlay: true,
 notifyOnErrors: true,
 poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
 // Use Eslint Loader?
 // If true, your code will be linted during bundling and
 // linting errors and warnings will be shown in the console.
 useEslint: true,
 // If true, eslint errors and warnings will also be shown in the error overlay
 // in the browser.
 showEslintErrorsInOverlay: false,
 /**
  * Source Maps
  */
 // https://webpack.js.org/configuration/devtool/#development
 devtool: 'eval-source-map',
 // If you have problems debugging vue-files in devtools,
 // set this to false - it *may* help
 // https://vue-loader.vuejs.org/en/options.html#cachebusting
 cacheBusting: true,
 // CSS Sourcemaps off by default because relative paths are "buggy"
 // with this option, according to the CSS-Loader README
 // (https://github.com/webpack/css-loader#sourcemaps)
 // In our experience, they generally work as expected,
 // just be aware of this issue when enabling this option.
 cssSourceMap: false,
 },
 build: {
 // Template for index.html
 index: path.resolve(__dirname, '../dist/index.html'),
 // Paths
 assetsRoot: path.resolve(__dirname, '../dist'),
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 /**
  * Source Maps
  */
 productionSourceMap: true,
 // https://webpack.js.org/configuration/devtool/#production
 devtool: '#source-map',
 // Gzip off by default as many popular static hosts such as
 // Surge or Netlify already gzip all static assets for you.
 // Before setting to `true`, make sure to:
 // npm install --save-dev compression-webpack-plugin
 productionGzip: false,
 productionGzipExtensions: ['js', 'css'],
 // Run the build command with an extra argument to
 // View the bundle analyzer report after build finishes:
 // `npm run build --report`
 // Set to `true` or `false` to always turn it on or off
 bundleAnalyzerReport: process.env.npm_config_report
 }
}

führt am Anfang das Pfadmodul in node ein,

Dann schauen wir uns zuerst den Konfigurationsinhalt unter dev an:

assetsSubDirectory bezieht sich auf den statischen Ressourcenordner, der Standardwert ist „statisch“,

assetsPublicPath bezieht sich auf den Release-Pfad,

proxyTable ist der Ort, den wir häufig zum Konfigurieren des Proxys verwenden API, was folgt, glaube ich, dass jeder etwas über Host und Port weiß, daher werde ich nicht auf Details eingehen

Ob autoOpenBrowser den Browser automatisch öffnet

errorOverlay-Abfragefehler

notifyOnErrors Benachrichtigungsfehler

, Umfrage Es handelt sich um eine Konfiguration im Zusammenhang mit dem Devserver. Der von Webpack bereitgestellte Devserver kann Dateiänderungen überwachen, aber in einigen Fällen können wir eine Umfrage (Umfrage) einrichten, um zu klären, ob

useEslint wird als eslint verwendet

showEslintErrorsInOverlay Ob Eslint-Fehlermeldungen angezeigt werden sollen

Die von devtool webpack bereitgestellte Konfiguration erleichtert das Debuggen. Weitere Informationen finden Sie in der Webpack-Dokumentation

CacheBusting ist eine Konfiguration, die mit devtool funktioniert. Beim Einfügen eines neuen Hashs in den Dateinamen wird festgelegt, ob in der Entwicklungsumgebung eine Quellzuordnung generiert werden soll im Dokument: „Das Ausschalten kann beim Debuggen der Quellzuordnung hilfreich sein.“ . .

cssSourceMap Ob cssSourceMap aktiviert werden soll

Sehen wir uns den Konfigurationsinhalt unter Build an:

index Der Pfad zu index.html nach der Kompilierung in path.resolve(__dirname, '../dist')

path.resolve(__dirname) bezieht sich auf den absoluten Pfad, in dem sich index.js befindet, und sucht dann nach dem Pfad „../dist“ (knotenbezogenes Wissen),

der Von AssetsRoot gepackte Dateien. Der Root-Pfad für AssetsSubDirectory und AssetsPublicPath ist derselbe wie in Dev,

Ob ProductionSourceMap Source-Map aktiviert,

devtool ist dasselbe wie dev,

Ob ProductionGzip komprimiert ist,

ProductionGzipExtensions Die Erweiterung der Datei, die im GZIP-Modus komprimiert werden muss. Nach dem Festlegen wird die Datei mit der entsprechenden Erweiterung komprimiert

bundleAnalyzerReport Ob Aktivieren Sie den gepackten Analysebericht

Bis hierher, config Der Inhalt unter dem Ordner ist im Grunde vollständig. Wie der Name schon sagt, handelt es sich bei diesen drei Dateien nur um fest codierte Konfigurationsdateien zu viele

Das Obige habe ich für alle zusammengestellt, ich hoffe, es wird in Zukunft für alle hilfreich sein.

Verwandte Artikel:

VUE2 realisiert die Auswahl sekundärer Provinz- und Stadtverknüpfungen

Verwendung von React zur Implementierung von Paging-Komponenten

So verwenden Sie SVG in React- und Vue-Projekten

Vergleichen Sie die Zeit am selben Tag mit JavaScript

Das obige ist der detaillierte Inhalt vonvue-cli-Konfigurationsdatei (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!