Vue-cli3 配置生產環境、測試環境 打包指令

1.在根目錄創建 .env.dev 文件 作爲測試環境配置
　　　　   創建 .env.prod文件 作爲生產環境配置
　　　　　(創建的文件和package.json在同一級)

 

2.配置.env.dev文件  .env.prod文件同下

// 測試環境標記 package.json用
VUE_APP_MODE = 'dev'
NODE_ENV = 'development'
// 測試環境 url請求路徑
VUE_APP_URL = 'http://192.168.1.2:9291'
// 配置代理
VUE_APP_URL1 = '/api'
// 測試文件上傳
VUE_APP_UPLOAD_URL = 'http://192.168.1.5:9291'


// 基礎服務 接口地址
VUE_APP_BASIC_URL = 'http://192.168.1.2:8083'
// 支出接口
VUE_APP_DISBURSE_URL = 'http://192.168.1.3:8081'
// 收入接口
VUE_APP_INCOME_URL = 'http://192.168.1.4:9291'

　　

3.配置package.json文件 創建打包指令

在script中配置兩條指令

 

其中mode 就是 上述文件中VUE_APP_MODE 後面的值

"buildDev": "vue-cli-service build --mode dev",
"buildProd": "vue-cli-service build --mode prod"

　　

4.使用 

在需要用到此接口地址的地方使用

使用方式

const BASE_URL = process.env.VUE_APP_URL

　　

如果報錯 VUE_APP_URL 並未找到 則需要重啓一下就可以了， 這時候如果

需要打包生產環境 使用

 

npm run buildProd

 

測試環境指令

 

npm run buildDev

 

　　

 

 

6.如果需要在開發環境中使用 env.dev的配置 需要在package.json中 添加 --mode dev

例如我的package.json部分配置信息

{
    "name": "settle-web",
    "version": "0.1.0",
    "private": true,
    "scripts": {
      "serve": "vue-cli-service serve --mode dev",
      "build": "vue-cli-service build",
      "lint": "vue-cli-service lint",
      "buildDev": "vue-cli-service build --mode dev",
      "buildProd": "vue-cli-service build --mode prod"
    },
    ......
}

　　

當使用 npm run serve 的時候 默認使用env.dev的配置