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

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

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

如下图所示:

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

修改和添加的代码如下:

  "serve": "vue-cli-service serve --mode development",
    "prod": "vue-cli-service build --mode production",
    "test": "vue-cli-service build --mode test"

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

如下图所示:

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

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

.env.production:

NODE_ENV = 'production' 
VUE_APP_API = 'https://api-manager.jiaogepengyou.info/v1_0_0/'

.env.test:

NODE_ENV = 'test' 
VUE_APP_API = 'http://47.96.7.180:8685/v1_0_0/'

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

production生产环境;test测试环境;development开发环境;

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

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

 代码如下所示:

4.最后一个环节:打包

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

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