vue-cli配置文件——config篇（转脚本之家）

config文件夹结构：
|-config
|---dev.env.js
|---index.js
|---prod.env.js
prod.env.js的文件内容：仅仅导出了一个对象，里面写明了执行环境是“production(生产环境)”

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  // API_ROOT: '"https://www.lvyinglc.com/api"' // 正式环境  =>  后端已经在上线时调整API地址，没事别改
  API_ROOT: '"https://twww.lvyinglc.com/api"' // 测试环境
}
dev.env.js的文件内容：
'use strict'
//引入webpack-merge模块，作用：合并两个配置文件对象并生成一个新的配置文件，有点类似于es6的object.assign();了解webpack-merge请访问：https://www.npmjs.com/package/webpack-merge
const merge = require('webpack-merge')
// 引入prod.env.js
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',//开发环境
  // API_ROOT: '"http://192.168.1.159:8080"'
  // API_ROOT: '"https://twww.lvyinglc.com/api"',接口地址，没有本地代理的情况下
  API_ROOT: '"/api"',//本地代理的接口地址,如果有本地代理的话（在index.js页面有配置）

})

index.js的文件内容：
'use strict'
const path = require('path')//引入了node中的path模块
module.exports = {
 dev: {
 assetsSubDirectory: 'static',//指静态资源文件夹，默认“static”
 assetsPublicPath: '/',//指发布路径
 //proxyTable: {},//常用来配置代理API,不需要配置的时候
　　//需要配置的时候
　proxyTable:{
　　'/api':{//将https://twww.lvyinglc.com印射为/api
　　　　target:'https://twww.lvyinglc.com',//接口域名
　　　　changeOrigin:true,//是否跨域
　　　　pathRewrite:{
　　　　　　'^/api':'/api'
　　　　},
　　　　secure:false,//如果是https接口，需要配置这个参数
　　　　}
　　},
 host: 'localhost', //本地执行地址
 port: 8080, //本地执行端口
 autoOpenBrowser: false,//是否自动打开浏览器
 errorOverlay: true,//查询错误
 notifyOnErrors: true,//通知错误
 poll: false, // 是跟devserver相关的一个配置，webpack为我们提供的devserver是可以监控文件改动的，但在有些情况下却不能工作，我们可以设置一个轮询poll（来解决）https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
 useEslint: true,//是否使用eslint
 showEslintErrorsInOverlay: false,//是否展示eslint的错误提示
 // https://webpack.js.org/configuration/devtool/#development
 devtool: 'eval-source-map',//webpack提供的用来方便调试的配置，他有四种模式，可以查看webpack文档了解更多
 // https://vue-loader.vuejs.org/en/options.html#cachebusting
 cacheBusting: true,//一个配合devtool的配置，当给文件名插入新的hash导致清楚缓存时是否生成souce maps，默认在开发环境下为true
 // (https://github.com/webpack/css-loader#sourcemaps)
 cssSourceMap: false,//是否开启cssSourceMap
 },
 build: {
 index: path.resolve(__dirname, '../dist/index.html'),//编译后index.html的路径，path.resolve(__dirname, '../dist')中。path.resolve(__dirname）指的是index.js所在的绝对路径，再去找“../dist”这个路径（node相关的知识）。
 assetsRoot: path.resolve(__dirname, '../dist'),//打包后的文件根路径，至于assetsSubDirectory和assetsPublicPath跟dev中的一样，
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 productionSourceMap: true,//是否开启source-map，
 // https://webpack.js.org/configuration/devtool/#production
 devtool: '#source-map',//同dev
 productionGzip: false,//是否压缩
 productionGzipExtensions: ['js', 'css'],//gzip模式下需要压缩的文件的扩展名，设置后会对相应扩展名的文件进行压缩
 bundleAnalyzerReport: process.env.npm_config_report//是否开启打包后的分析报告
 }
}