fichier de configuration vue-cli (tutoriel détaillé)

Cet article présente principalement comment configurer webpack dans vue-cli. Cet article analyse principalement le code pertinent dans le dossier config dans vue et la structure des fichiers de config. Les amis intéressés peuvent se référer à cet article

I. J'ai étudié Webpack récemment, et tout à coup j'ai voulu voir comment Webpack est configuré dans vue-cli. J'ai lu beaucoup d'articles connexes, j'ai donc également trouvé quelques éléments sur la configuration de vue-cli. Comme le dit le proverbe : « Si vous voulez bien faire votre travail, vous devez d'abord affûter vos outils » ! Cet article analyse principalement le code pertinent dans le dossier config de vue ;

Tout d'abord, jetons un coup d'œil à la structure des fichiers de config :

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

Ouvrez notre dossier de projet vue et nous vous peut clairement voir les trois fichiers dans le dossier, "dev.env.js", "index.js", "prod.env.js". Ouvrons d'abord le fichier prod.env.js et regardons le contenu :

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

Le contenu de prod.env.js est très simple. Il exporte simplement un objet, qui indique que l'environnement d'exécution est « production (environnement de production) » correspondant ; Fichier .js :

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

Dans "dev.env.js", le module webpack-merge est introduit pour la première fois. La fonction de ce module est de fusionner deux objets de fichier de configuration et de générer un nouveau fichier de configuration, qui est quelque peu similaire à object.assign() d'es6 ;

vue-cli extrait certaines configurations courantes et les place dans un seul fichier. fichier, configurez différents codes pour différents environnements et enfin utilisez webpack-merge pour fusionner et réduire le code en double, "webpack suit le principe de non-répétition (Ne vous répétez pas - DRY). Vous ne le ferez pas. configurez le même code dans différents environnements. »

D'accord, revenons au code. Après avoir introduit webpack-merge, ce fichier introduit également prod.env.js, puis prod La configuration d'env.js. et la nouvelle configuration, qui indique l'environnement de développement (développement), sont fusionnées. (Je ne comprends pas très bien pourquoi cela est fait. C'est correct d'écrire module.exports={NODE_ENV:'"development'} directement sans fusion. Est-ce pour une rétrogradation gracieuse ?)

Il y a un autre point à noter Oui, le développement et. La production doit être entourée de guillemets doubles, sinon une erreur sera signalée ! ! !

Enfin, regardons index.js :

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

introduit le module path dans node au début,

Ensuite, regardons d'abord le contenu de la configuration sous dev :

assetsSubDirectory fait référence au dossier de ressources statiques, la valeur par défaut est "static",

assetsPublicPath fait référence au chemin de publication,

proxyTable est l'endroit que nous utilisons souvent pour configurer l'API proxy. Je pense que tout le monde connaît l'hôte et le port derrière, donc je n'entrerai pas dans les détails

Si autoOpenBrowser ouvre automatiquement le navigateur

erreur de requête errorOverlay

. Erreur de notification notifyOnErrors
, le sondage est une configuration liée au devserver. Le devserver fourni par webpack peut surveiller les modifications des fichiers, mais dans certains cas, cela ne fonctionne pas. Nous pouvons mettre en place un sondage (sondage) pour résoudre le problème

.

useEslint S'il faut utiliser eslint

showEslintErrorsInOverlay S'il faut afficher les invites d'erreur eslint

La configuration fournie par devtool webpack pour faciliter le débogage Il dispose de quatre modes Vous pouvez consulter la documentation du webpack pour apprendre. plus

cacheBusting est une configuration qui fonctionne avec devtool Lors de l'insertion d'un nouveau hachage dans le nom du fichier pour vider le cache, la valeur par défaut est vraie dans l'environnement de développement, mais il existe également un. phrase dans le document : "Désactiver cette option peut aider au débogage de la carte source." . .

cssSourceMap S'il faut activer cssSourceMap
Regardons le contenu de la configuration sous build :
index Le chemin vers index.html après compilation, dans path.resolve(__dirname, '../dist')

path.resolve(__dirname) fait référence au chemin absolu où se trouve index.js, puis recherchez le chemin "../dist" (connaissance liée au nœud),

le les fichiers regroupés par AssetsRoot Chemin racine, comme pour AssetsSubDirectory et AssetsPublicPath sont les mêmes que ceux de dev,

Que productionSourceMap active la carte source,

devtool est le même que dev,

Si productionGzip est compressé,

productionGzipExtensions L'extension du fichier qui doit être compressé en mode gzip Après réglage, le fichier avec l'extension correspondante sera compressé

bundleAnalyzerReport. activer le rapport d'analyse packagé

Jusqu'ici, config Le contenu sous le dossier est fondamentalement complet Comme leurs noms nous l'indiquent, ces trois fichiers ne sont que des fichiers de configuration codés en dur Jusqu'à présent, je n'ai pas rencontré. trop

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

VUE2 réalise la sélection de liaisons de province et de ville secondaires

Utilisation de React pour implémenter des composants de pagination

Comment utiliser SVG dans les projets React et Vue

Comparez l'heure le même jour via JavaScript

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!