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//是否开启打包后的分析报告

 }

}