在很多項目的開發(fā)中烹俗，我們都需要配置多個環(huán)境以便測試項目蛤袒，每次打包時也需要手動切換環(huán)境地址鸟蜡，而且很容易因為忘記或者手誤之類的原因乘粒，造成打包的環(huán)境出現(xiàn)各種問題豌注。所以為了避免切換環(huán)境造成的麻煩（主要是一個項目打包好多次太麻煩） 所以，可以選擇配置幾個打包命令灯萍，代替你切換環(huán)境的煩惱轧铁。
而vue-cli3中，項目的配置文件也挪到了vue.config.js中竟稳。
下面 正文橫空出世~~~~
首先属桦，需要在package.json中熊痴，修改運行命令的配置他爸。
新建環(huán)境需要的配置文件聂宾，
在根目錄下（是與package.json同級喲） 新建存放配置內(nèi)容的文件。
.env.dev 比如這個诊笤，.env后面的名稱很重要系谐，是你在package中要用到的
先來說說.env.dev中的內(nèi)容吧0.0
NODE_ENV = 'devConfig'
VUE_APP_CURRENTMODE = 'dev'
VUE_APP_BASE_URL = ''
VUE_APP_OUTPUT_DIR = 'dev' // 配置輸出文件夾
以上內(nèi)容都是可以在vue.config.js中拿到的，不過想要在文件中使用的配置讨跟，需要以VUE_APP_作為開頭前綴纪他，后面自定義名稱。 文件中最好不要有除了配置內(nèi)容外任何多余的文字注釋Ａ澜场２杼弧！
使用時為：
outputDir: process.env.VUE_APP_OUTPUT_DIR, // 輸出文件夾
比如這個打包輸出文件夾的配置凉馆，需要以process.env.作為前綴薪寓，后面是你自己定義的VUE_APP_XXX。
建好配置文件澜共，就要修改package.json了向叉，里面有"scripts"，是運行時的命令行嗦董，可以自定義修改母谎。
所有使用配置文件內(nèi)容的時候，只要用process.env.就可以啦京革。
"scripts": {
"serve": "vue-cli-service serve --mode dev-serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"build:dev": "vue-cli-service build --mode dev", // 增加打包環(huán)境后綴
"build:prod": "vue-cli-service build --mode prod"
},
至于打包的命令嘛奇唤，我的build:dev只是為了方便知道是干嘛的，反正命令到底是什么匹摇，大家自己選咯咬扇。
只要在后面vue-cli-service build --mode dev ，這里来惧，vue-cli-service后面要配build冗栗，其他看心情啦。
--mode 后面的名稱供搀，一定要是.env配置文件的后綴名稱隅居。
比如之前.env.dev，那再package中--mode后面的名稱就一定是dev
一定要是配置文件后綴名稱葛虐！一定要是配置文件后綴名稱胎源！一定要是配置文件后綴名稱！重要的事情說三遍
不過呢屿脐，因為選擇了動態(tài)獲取環(huán)境地址涕蚤，那npm run serve時的環(huán)境地址也是不能忘記噠宪卿，大不了再多配一個嘛，反正多環(huán)境已經(jīng)有了万栅，不差這一兩個了佑钾。配完再加上判斷條件，在線調(diào)試用自己寫的地址烦粒，打包用配置文件里的休溶。完美~
那么，也就這么多了扰她，配置完就可以重啟項目了兽掰，打包的時候只要帶上你自己定義的命令就行啦。
啊對徒役，還有一件事情------打包完之后的代碼孽尽，如果不打包map文件是沒有做任何壓縮的喲，就算打包map文件忧勿，項目中的注釋之類的依舊會在map中存在杉女，如果有強迫癥的話，這個就不能忍了狐蜕。
填坑方式在另一篇文章中宠纯，有興趣可以去圍觀一波。鏈接在下面↓
http://www.reibang.com/p/2b730887881b
完結(jié)撒花??ヽ(°▽°)ノ?
