共计 812 个字符，预计需要花费 3 分钟才能阅读完成。
前言：
想实现通过不同的命令，打包调用不同环境的 API，实现实现前端自动化部署。
前端自动化部署工程比较复杂，这里只介绍通过不同的命令，打包的时候调用不同环境的 API，例如：npm run build 调用开发环境接口，打包开发环境 npm run build:test 调用测试环境接口，打包测试环境 npm run build:prod 调用生产环境接口，打包生产环境
vue 项目用 vue-cli 脚手架安装完成之后，生成的项目中会有 build,config 这两个文件夹
1、在 build 文件下新建 webpack.test.conf.js
在 build 文件下新建 webpack.test.conf.js，将 webpack.prod.conf.js 内容复制过来。修改 webpack.test.conf.js 文件将 const env = require(‘../config/prod.env’)；修改为：const env = require(‘../config/test.env’)；
2、在 config 文件下新建 test.env.js
在 config 文件下新建 test.env.js，将 prod.env.js 内容复制过来；分别在 dev.env.js,test.env.js,prod.env.js 中定义变量 API_ROOT，dev.env.js
test.env.js
prod.env.js
3、在 build 文件下新建 test.js
把 build.js 内容复制到 test.js 将
const webpackConfig = require(‘./webpack.prod.conf’)
修改为：
const webpackConfig = require(‘./webpack.test.conf’)
4、修改 package.json
配置 axios 请求的时候，接口地址直接调用 process.env.API_ROOT 就好了，打包的时候执行 npm run build:test 就是调用的测试接口地址
