vue cli 4 多环境_vue-cli3多环境打包配置

1.项目中需要用到多环境打包

alpha环境（测试环境development）打包成alpha文件包，且接口为http://xxx.alpha.com.cn

正式环境（正式环境为production）打包成dist文件包，且接口为http://xxx.pro.com.cn

2.首先先安装vue-cli3

npm install -g @vue/cli

安装好之后的项目是这样的，见下图：

相比较vue-cli2的项目，缺少了build和config目录，另外static目录也没了，多了个public目录。

配置文件需要自己写一个vue.config.js,可以参考官方文档文档写，网址

配置参考 | Vue CLI​cli.vuejs.org

现在说重点，怎么配置多环境。打开package.json文件

在scripts里面修改环境配置，可以根据自己的项目来修改对应的环境，见下图

配置文件：根目录下创建三个文件.env .env.development .env.production

在上面三个文件中写

.env文件

.env.development

.env.production

vue.config.js配置打包不同的文件

如果是测试环境打包成alpha文件夹

正式环境打包成dist文件夹

不同环境，不同接口，我是在axios中区别不同接口的

好了，这样可以根据不同环境打包不同的包啦