SoFunction
Updated on 2025-04-04

Method of configuration files under vue-cli scaffolding config directory

This article introduces the configuration file under the vue-cli scaffolding config directory

1. This configuration file is used to define the parameters required in the development environment and production environment.

2. About comments

When it comes to more complex explanations, I will write the explanation to a separate comment module through the identification method (such as (1)), please check it yourself

3. Upload the code

// see /webpack for documentation.
// path is a path module, used to deal with the problem of path uniformityvar path = require('path')

 = {
 // Below are some configurations of build that is, production and compilation environment build: {
  // Import the configuration file, as long as it is used to specify the current environment, see (1)  env: require('./'),
  // Below is the splicing of relative paths. If the current directory is config, then the attribute value of the index attribute configured below is dist/  index: (__dirname, '../dist/'),
  // The following is defined as the root directory of the static resource, that is, the dist directory  assetsRoot: (__dirname, '../dist'),
  // The following is defined as the subdirectory static of the root directory of the static resource, that is, the static below the dist directory  assetsSubDirectory: 'static',
  // The following is defined as the public path of the static resource, that is, the real reference path  assetsPublicPath: '/',
  // The following defines whether to generate a production environment's source. The source is used to debug the compiled file and is implemented by mapping it to the pre-compiled file.  productionSourceMap: true,
  // 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
  // Below is whether to compress the code in a production environment. If you want to compress, you must install compression-webpack-plugin  productionGzip: false,
  // The following defines which types of files to compress  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
  // The following is a report used to enable the compilation completed. You can turn on or off by setting the values ​​to true and false.  // The following .npm_config_report represents a defined npm_config_report environment variable, which can be set by yourself  bundleAnalyzerReport: .npm_config_report
 },
 dev: {
  // Introduce the current directory to indicate the development environment. See (2)  env: require('./'),
  // Below is the port number of dev-server, which can be changed by yourself  port: 8080,
  // The following indicates whether to open the browser with custom  autoOpenBrowser: true,
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  // Below is the proxy table, which is used to build a virtual API server to proxy native requests, which can only be used in development mode  // See (3)  proxyTable: {},
  // CSS Sourcemaps off by default because relative paths are "buggy"
  // with this option, according to the CSS-Loader README
  // (/webpack/css-loader#sourcemaps)
  // In our experience, they generally work as expected,
  // just be aware of this issue when enabling this option.
  // Whether to generate css and map files, the above paragraph means that there may be problems with using this cssmap, but according to experience, there is no big problem, you can use it  // I feel that there is no need to use this. If there is a problem with CSS, I won’t just do it directly on the console.  cssSourceMap: false
 }
}

Comments

(1) The following configuration content

 = {
  // The function is very obvious, which is to export an object. NODE_ENV is an environment variable, specifying the production environment  NODE_ENV: '"production"'
 }

(2) The following configuration content

 // The first thing I introduced is the merge plugin of webpack. This plugin is used to merge objects, that is, for configuration files. The same options will be overwritten. As for why we beat each other many times here, there may be another picture. var merge = require('webpack-merge')
 // Import configuration files var prodEnv = require('./')
 // Merge the two configuration objects, the final result is NODE_ENV: '"development"'  = merge(prodEnv, {
  NODE_ENV: '"development"'
 })

(3) The following are the general usage of proxyTable

vue-cli uses this function to solve cross-domain request API with the help of http-proxy-middleware plug-in

 proxyTable: {
  '/list': {
   target: '', -> Targeturladdress
   changeOrigin: true, -> Indicates whether to cross domain
   pathRewrite: {
   '^/list': '/list' -> Available /list Equivalent to /list
   }
  }
 }

The above method of configuration files in the vue-cli scaffolding config directory is all the content I share with you. I hope you can give you a reference and I hope you can support me more.