由於公司專案需要多環境，就研究了一下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
②測試環境 如下圖
這裡開發環境 的 node_env 需要配置為 production
③ 發布環境 如下圖
這裡發布環境的 node_env需要配置為production
④ 如果需要其他環境 按照以上描述 建立 .env.[model]檔案
如果是 專案打包 那麼 node_env 設定為 production ,本地執行(不需要打包) node_env 設定為 development
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]的值
完成以上配置 就可以按需要執行打包命令，完成vue-cli3的 多環境打包配置。
vue cli3的多環境配置
node env development development 開發環境介面位址 env.production 生產環境檔案 node env production production 生產環境介面位址 env.test 測試環境檔案 node env production test 測試環境介...
Vue cli3 配置生產環境 測試環境 打包指令
1.在根目錄建立 env.dev 檔案 作為測試環境配置 建立 env.prod檔案 作為生產環境配置 建立的檔案和package.json在同一級 2.配置.env.dev檔案 env.prod檔案同下 測試環境標記 package.json用 node env development 測試環境 ...
vue cli3實現分環境打包
在vue cli3的專案中，預設的package.json配置 此時只要根據process.env.node env設定不同請求url就可以很簡單的區分出本地和線上環境。但是實際真實的專案中，會有測試，預發布等環境。並且vue cli3號稱0配置，無法直接修改打包檔案，那麼怎麼區分不同的線上環境呢？...