vue-cli / vue-cli3 配置不同环境对应不同打包命令详解

废话不多说，直接跟着我的步骤走；

vue-cli

1、package.json

因为我这边的Jenkins（测试环境）的脚本执行命令为 build（运维不给改）所以只好前端将build命令对应的环境修改为测试环境。原来的build修改为build-prod，（最好还是build-test和build-prod这两个命令分的清除）

注意：build:node build/test.js 这句话中的test 要作为 env.NODE_ENV 的值

 

2.复制build.js，粘贴在同级目录build里，修改名字为test.js

修改test.js里面的两个配置，其余不用动。如下图所示

process.env.NODE_ENV = 'test'

const webpackConfig = require('./webpack.test.conf')

复制webpack.prod.conf.js，粘贴在同级目录build里，修改名字为webpack.test.conf.js

修改webpack.test.conf.js里面的两个配置，其余不用动。如下图所示

const env = require('../config/test.env')

mode: 'none',

在修改build目录下webpack.base.conf.js的一个配置，其余不用动。如下图所示

3.在config目录下新建test.env.js

.

test.env.js内容如下所示：

 

dev.env.js内容如下图所示：

 

prod.env.js内容如下图所示：

4.在其他地方的使用如下：

只需要process.env.XXXXX就可以；

4.1第一种使用方法如下：

4.2第二种使用方法如下：

当然你想怎么使用就怎么使用。我只是这两种方式而已。

vue-cli3

vue-cli3那就更简单了

1.package.json配置如下
build-test:打包测试环境接口地址

build-prod:打包正式/线上环境接口地址

2.添加四个文件和package.json同级目录下（根路径下）
.env.test  对应测试环境

.env.dev 对应本地开发环境

.env.build 对应正式/线上环境

index.js 配置的是三个环境对应的接口地址

.env.dev文件内容如下：

.env.test文件内容如下：

.env.build文件内容如下：

.env.test和.env.build的NODE_ENV 都为“production”

所以是根据 VUE_APP_TITLE 来区分不同环境的

index.js最终配置的为不同环境下对应的接口域名；

使用方法如下：

最后只需要

执行 npm run build-test 就会打包测试环境的接口地址

执行 npm run build-prod 就会打包正式环境的接口地址；