vue-cli3.0/4.0分环境打包

我做一个后台项目。测试那边要的是测试接口,开发那边用的是生产接口,就相当于有两个不同环境的接口。每次都进行手动改的话,会很麻烦,所以,整理了一下资料,把这两种环境给搞了出来。

1.刚开始创建完项目之后,在package.json里面会有默认的两句。

如下图所示:

我们需要添加一个测试版本环境和一个生产版本环境。添加后如下图所示(增加了框选住的两句):

添加的代码如下:

    "test": "vue-cli-service build --mode test",
    "prod": "vue-cli-service build --mode prod"

2.在根目录下建立两个文件

如下图所示:

注意:建立文件的名字env后面的名字要和package.json里面的--mode后面的名字保持一致。

下面让我们看一下两个文件里面的代码(只写下面两行代码就可以了): .env.prod:

NODE_ENV = 'prod' 
VUE_APP_TITLE = 'prod'

.env.test:

NODE_ENV = 'test' 
VUE_APP_TITLE = 'test'

OK了,我们现在将两个环境给区分开了。

prod生产环境;test测试环境

3.请求数据的时候,测试环境和生产环境的接口变化

一般我们写接口都写在api.js里面,那么让我们看一下,api.js文件的主要内容部分:

代码如下所示:

var baseUrl = ''

switch (process.env.VUE_APP_TITLE) {
  case 'test'://测试环境接口
    baseUrl = ''
    break
  case 'prod'://生产环境接口
    baseUrl = ''
}
// 开发环境接口
if (process.env.NODE_ENV == "development") {
  baseUrl = ''
}

4.最后一个环节:打包

当我们打包生产环境的时候,运行命令:npm run prod

当我们打包测试环境的时候,运行命令:npm run test