iview-admin多环境配置打包

iview-admin 目前版本，比起之前，移除了config目录，并且将 vue-cli 升级到了3.0.

在实际开发中，我们可能会用到3种环境

• 本地开发环境 dev
• 测试环境 test
• 线上环境 prod

当然，更正规的还会有一个预发环境。但是一般初创公司，有以上三种环境的居多。

那么，不同环境会对应不同的接口地址，不同的线上地址等，为了解决开发人员频繁切换XX地址，切换不同环境所对应的端口号，换多了，可能有的时候就忘记了现在到底是什么地址，那么我们就可以利用 vue-cli3.0 环境变量和模式特性来支持多环境配置打包，来解决配置切换问题。

在项目根目录添加环境变量

• 添加开发环境 .env.dev

NODE_ENV = 'dev'
BASE_URL = '/'
复制代码

• 添加测试环境 .env.beta

NODE_ENV = 'test'
BASE_URL = 'http://xxx.com'
复制代码

• 添加生产环境 .env.prod

NODE_ENV = 'prod'
BASE_URL = 'http://xxx.com'
复制代码

不能使用 development、test、production ，他们是 NODE_ENV 默认的环境变量

其中，NODE_ENV 使用的是 production打包配置

VUE_APP_PORT 是 对应项目的 端口号

BASE_URL 是前端项目访问时的相对地址

修改 vue.config.js

const BASE_URL = process.env.BASE_URL
复制代码

修改src/config/index.js文件

baseUrl: {
   dev: 'http://localhost:8081',
   test: 'http://www.test.com',
   prod: 'http://www.prod.com'
 },
复制代码

修改src/libs/api.request.js文件

const env = process.env.NODE_ENV
const baseUrl = config.baseUrl[env]
复制代码

如果需要mock数据，那么可以在相应的环境变量中添加mock的标志，操作是一致的。

转载于:https://juejin.im/post/5ca206ef51882543e31e293d