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.