vue中config目录下index.js源码分析

前言： 在vue项目的config目录下，有一个index.js文件。这个文件是vue-cli生成的配置文件，用来配置项目的一些基本参数、插件和自定义配置。在本文中，我们将对这个index.js文件进行分析，并解释其中的代码用途和规范。 代码分析： 以下是index.js的源代码：

'use strict'
// Template version: 1.3.1
// 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,

    cssSourceMap: true
  },

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

第一段： 在index.js文件中，有两个导出的对象dev和build，分别设置了在开发环境和生产环境中的配置参数。 dev对象用于配置开发环境相关参数，包括assetsSubDirectory、assetsPublicPath、proxyTable等。assetsSubDirectory表示静态资源存放的子目录，默认是'static'；assetsPublicPath表示静态资源在构建发布时的公共路径，默认是'/'；proxyTable表示代理配置表，默认为空。 下面是dev对象中的其他参数配置： - host：指定开发服务器的主机名，默认是'localhost'； - port：指定开发服务器的端口号，默认是8080； - autoOpenBrowser：是否自动在浏览器中打开项目，默认为false； - errorOverlay和notifyOnErrors：用于在浏览器中是否显示错误的配置，默认为都为true； - useEslint和showEslintErrorsInOverlay：用于配置是否在控制台和浏览器中显示lint错误信息。 第二段： 继续分析index.js文件中的代码，我们来看build对象。 build对象用于配置生产环境相关参数，包括index、assetsRoot、assetsSubDirectory、assetsPublicPath等。其中，index表示用于构建的index.html模板文件路径；assetsRoot表示构建后文件存放的根目录路径；assetsSubDirectory表示静态资源存放的子目录；assetsPublicPath表示静态资源在构建发布时的公共路径。 下面是build对象中的其他参数配置： - productionSourceMap和devtool：用来配置是否生成生产环境的源映射，以及选择合适的source map类型； - productionGzip和productionGzipExtensions：用来配置是否开启gzip压缩以及需要进行gzip压缩的文件扩展名； - bundleAnalyzerReport：用来在构建完成后是否生成并展示打包分析报告。 总结： 在vue项目的config目录下的index.js文件中，我们可以配置开发环境和生产环境的相关参数。通过修改这些配置，我们可以灵活地调整开发环境和构建产物的输出方式和位置，也可以配置代理、lint检查等功能。这个文件在vue-cli生成的项目中扮演着重要的角色，为我们提供了一种灵活的方式来自定义和调整项目的构建配置。