[TOC] >[success] # vue-cli3.0多環境配置 通常開發運行項目時候只需要一個 **development（開發環境）** ， **打包** 時候卻需要打 **n種環境（測試環境、uat環境、正式環境）** 的 **包(dist文件夾)** ，廢話不多說進入主題，**配置多環境打包**。 >[success] ## 第一步：創建.env文件儲存環境變量 ~~~ 在根目錄下創建'.env.development'（開發環境）、'.env.production'（生產環境）'.env.uat'(uat環境)文件， 這里的'.env'后面的名字可以自己隨便起，但是默認是有2種環境（development、production），如果想多增加 別的環境就手動創建新的.env文件即可 ~~~ 如圖：  ~~~ 在對應的環境文件(.env.development、.env.production、.env.uat)中配置對應的環境的服務器地址即可，這里的 'VUE_APP_'是固定寫法后面的URL自己可以隨便起名字 ~~~ 有關[VUE_APP_](https://cli.vuejs.org/zh/guide/mode-and-env.html#%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F)名稱的說明。 >[success] ## 第二步：配置指令 修改 **package.json** 文件 ~~~ "scripts": { "serve": "vue-cli-service serve", // 這里運行的是.env.development文件的服務器地址 "build": "vue-cli-service build", // 這里運行的是.env.production文件的的服務器地址 "lint": "vue-cli-service lint", "uat":?"vue-cli-service?build -- mode uat", // 這里的 --mode是固定寫法，后面的uat跟你前面起的名字一致 } ~~~ ~~~ 需要注意的地方： 'vue-cli-service?build' 和 'vue-cli-service?serve' 別搞混淆了 ~~~ >[success] ## 第三步：配置axios的BaseURL 在axios封裝的js配置文件中修改 ~~~ baseURL: process.env.VUE_APP_URL // 配置axios請求服務器地址 ~~~ 這里需要注意 **process.env** 的屬性（**VUE_APP_URL** ）一定要跟 **文件.env.xxx** 文件中配置的變量保持一致。 >[success] ## 第四步：打包操作 **執行打包指令** ： 1. **正式環境** ~~~ npm run build '或者' npm run build:prod ~~~ 2. **測試環境** ~~~ npm run build:dev ~~~ 3. **uat環境** ~~~ npm run build:uat ~~~