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的配置