vue-cli配置文件——config文件夹

dev.env.js

'use strict'
// 先引入了webpack-merge这个模块。这个模块的作用是来合并两个配置文件对象并生成一个新的配置文件
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

// 注明这是开发环境
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"'
})

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', // 指的是静态资源文件夹，默认“static”
    assetsPublicPath: '/', // 发布路径
    proxyTable: {}, // 常用来配置代理API的地方

    // 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, // 通知错误
    // 是跟devserver相关的一个配置，webpack为我们提供的devserver是可以监控文件改动的，但在有些情况下却不能工作，我们可以设置一个轮询（poll）来解决
    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.
    // 是否使用eslint
    useEslint: true,
    // If true, eslint errors and warnings will also be shown in the error overlay
    // in the browser.
    // 是否展示eslint的错误提示
    showEslintErrorsInOverlay: false,

    /**
     * Source Maps
     */

    // https://webpack.js.org/configuration/devtool/#development
    // 是webpack提供的用来方便调试的配置，它有四种模式，可以查看webpack文档了解更多
    devtool: 'cheap-module-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
    // 一个配合devtool的配置，当给文件名插入新的hash导致清楚缓存时是否生成souce maps，默认在开发环境下为true
    cacheBusting: true,
    // 是否开启cssSourceMap
    cssSourceMap: true
  },

  build: {
    // Template for index.html
    // 编译后index.html的路径
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    // 打包后的文件根路径，至于assetsSubDirectory和assetsPublicPath跟dev中的一样，
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/cmsSchoolHtml/',

    /**
     * Source Maps
     */
    // 是否开启source-map
    productionSourceMap: false,
    // https://webpack.js.org/configuration/devtool/#production
    // 同dev
    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,
    // gzip模式下需要压缩的文件的扩展名，设置后会对相应扩展名的文件进行压缩
    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
  }
}

prod.env.js

'use strict'

// 注明此为生产环境
let proObj = {
  NODE_ENV: '"production"'
}

const buildType = process.argv.splice(2)[0]

switch (buildType) {
  case 'test':
    proObj.buildType = '"test"'
    process.env.buildType = 'test'
    break
  case 'dev':
    proObj.buildType = '"dev"'
    process.env.buildType = 'dev'
    break
  case 'hw':
    proObj.buildType = '"hw"'
    process.env.buildType = 'hw'
    break
  default:
    proObj.buildType = '"pro"'
    process.env.buildType = 'pro'
    break
}
module.exports = proObj