????????本文章來自轉(zhuǎn)載隅忿，主要講解了vue-cli下的config配置相關(guān)文件。（涉及到較復(fù)雜的解釋將通過標(biāo)識(shí)的方式(如（1）)將解釋寫到單獨(dú)的注釋模塊膳灶，）
//config目錄下index.js配置文件
// see http://vuejs-templates.github.io/webpack for documentation.
// path是node.js的路徑模塊攻柠，用來處理路徑統(tǒng)一的問題
var path = require('path')
module.exports = {
// 下面是build也就是生產(chǎn)編譯環(huán)境下的一些配置
build: {
// 導(dǎo)入prod.env.js配置文件，只要用來指定當(dāng)前環(huán)境蝉仇，詳細(xì)見(1)
env: require('./prod.env'),
// 下面是相對(duì)路徑的拼接旋讹，假如當(dāng)前跟目錄是config，那么下面配置的index屬性的屬性值就是dist/index.html
index: path.resolve(__dirname, '../dist/index.html'),
// 下面定義的是靜態(tài)資源的根目錄 也就是dist目錄
assetsRoot: path.resolve(__dirname, '../dist'),
// 下面定義的是靜態(tài)資源根目錄的子目錄static轿衔，也就是dist目錄下面的static
assetsSubDirectory: 'static',
// 下面定義的是靜態(tài)資源的公開路徑沉迹，也就是真正的引用路徑
assetsPublicPath: '/',
// 下面定義是否生成生產(chǎn)環(huán)境的sourcmap，sourcmap是用來debug編譯后文件的害驹，通過映射到編譯前文件來實(shí)現(xiàn)
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
// 下面是是否在生產(chǎn)環(huán)境中壓縮代碼鞭呕，如果要壓縮必須安裝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
// 下面是用來開啟編譯完成后的報(bào)告，可以通過設(shè)置值為true和false來開啟或關(guān)閉
// 下面的process.env.npm_config_report表示定義的一個(gè)npm_config_report環(huán)境變量宛官，可以自行設(shè)置
bundleAnalyzerReport: process.env.npm_config_report
},
dev: {
// 引入當(dāng)前目錄下的dev.env.js葫松，用來指明開發(fā)環(huán)境瓦糕，詳見(2)
env: require('./dev.env'),
// 下面是dev-server的端口號(hào)，可以自行更改
port: 8080,
// 下面表示是否自定代開瀏覽器
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
// 下面是代理表进宝，作用是用來刻坊，建一個(gè)虛擬api服務(wù)器用來代理本機(jī)的請(qǐng)求，只能用于開發(fā)模式
// 詳見(3)
proxyTable: {},
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
// 是否生成css党晋，map文件谭胚，上面這段英文就是說使用這個(gè)cssmap可能存在問題，但是按照經(jīng)驗(yàn)未玻，問題不大灾而，可以使用
// 給人覺得沒必要用這個(gè)，css出了問題扳剿，直接控制臺(tái)不就完事了
cssSourceMap: false
}
}
注釋
(1)下面是prod.env.js的配置內(nèi)容
module.exports = {
// 作用很明顯旁趟，就是導(dǎo)出一個(gè)對(duì)象，NODE_ENV是一個(gè)環(huán)境變量庇绽，指定production環(huán)境
NODE_ENV: '"production"'
}
(2)下面是dev.env.js的配置內(nèi)容
// 首先引入的是webpack的merge插件锡搜，該插件是用來合并對(duì)象，也就是配置文件用的瞧掺，相同的選項(xiàng)會(huì)被覆蓋
var merge = require('webpack-merge')
// 導(dǎo)入prod.env.js配置文件
var prodEnv = require('./prod.env')
// 將兩個(gè)配置對(duì)象合并耕餐，最終結(jié)果是 NODE_ENV: '"development"'
module.exports = merge(prodEnv, {
NODE_ENV: '"development"'
})
(3)下面是proxyTable的一般用法
vue-cli使用這個(gè)功能是借助http-proxy-middleware插件，一般解決跨域請(qǐng)求api
proxyTable: {
'/list': {
target: 'http://api.xxxxxxxx.com', -> 目標(biāo)url地址
changeOrigin: true, -> 指示是否跨域
pathRewrite: {
'^/list': '/list' -> 可以使用 /list 等價(jià)于 api.xxxxxxxx.com/list
}
}
}
本文轉(zhuǎn)自qz奔跑的馬# vue-cli腳手架config目錄下index.js配置文件詳解
不要被任何人打亂你的腳步辟狈，因?yàn)闆]有人和你一樣清楚和在乎自己的夢(mèng)想肠缔。
