由於公司項目需要多環境，就研究了一下vue-cli3的多環境配置，這里和大家分享一下vue-cli3多環境配置方法
首先我們先看看 vue-cli環境變量和模式，通過官網我們可以發現 vue-cli 提供了三個模式（test、development、production）而每種NODE_ENV下面可以配置多個環境變量
我們可以通過.env文件增加后綴來設置某個模式下特有的環境變量
我們可以通過傳遞 --mode選項參數為命令覆寫默認的模式，使用自己的環境變量
了解基本情況之后我們就舉例子實現多環境:
1、首先在項目目錄下創建不同的.env文件(目前我們討論 開發環境 dev,測試環境test,發布環境 prod) 所以我們創建如下三個文件(.env.prod、.env.test、.env.development)
2、配置三個文件
①開發環境: 如下圖
這里開發環境 的 NODE_ENV 需要配置為 development
VUE_APP_API_URL 設置對應的請求地址
②測試環境 如下圖
這里開發環境 的 NODE_ENV 需要配置為 production
VUE_APP_API_URL 設置對應的請求地址
③ 發布環境 如下圖
這里發布環境的 NODE_ENV需要配置為production
VUE_APP_API_URL 設置對應的請求地址
④ 如果需要其他環境 按照以上描述 創建 .env.[model]文件
如果是 項目打包 那么 NODE_ENV 設置為 production ,本地運行(不需要打包) NODE_ENV 設置為 development
VUE_APP_API_URL 設置對應的請求地址
特別提示 上述的 VUE_APP_API_URL 不一定非要使用這個變量 只要是 VUE_APP_ 開頭的都可以因為 只有以 VUE_APP_ 開頭的變量會被 webpack.DefinePlugin 靜態嵌入到客戶端側的包中。都可以使用 process.env.VUE_APP_** 獲取相應的值
2、完成以上所需環境配置之后改寫 package.json
這里 需要注意的 是 --model 后面的參數 需要是 .env.[model] 文件 對應的 [model]
例如 .env.test 文件 那么 這里就是 --mode test
.env.prod 文件 那么 這里就是 --mode prod
特別提示 本地開發環境 如果 本地開發環境 配置 的 .env.[model] 文件名中的 model 為 development 那么 直接使用上述的 vue-cli-service serve --port 8090 --open命令，但是 如果 .env.[model]的文件名中的model 不是 development 那么 就需要在 命令后面添加 --model 這個model的值 對應的就是 .env.[model]文件的 后綴[model]的值
3、 完成以上配置 之后 只需要在 請求配置文件中 讀取 process.env.VUE_APP_API_URL 的值(這個變量名 根據自己配置填寫)
我的項目 使用serve.config.js 單獨配置請求地址 ,然后導出 在axios配置文件中使用, 大家可以根據自己項目 將 process.env.VUE_APP_API_URL這個地址變量放到自己需要配置的地方就可以了。
完成以上配置 就可以按需要執行打包命令，完成vue-cli3的 多環境打包配置。
希望這篇文章對大家用所幫助，如果以上流程有不對的地方，歡迎留言，大家互相學習