想实现经过不一样的命令,打包调用不一样环境的API,实现实现前端自动化部署。javascript
前端自动化部署工程比较复杂,这里只介绍经过不一样的命令,打包的时候调用不一样环境的API,
例如:npm run build
调用开发环境接口,打包开发环境npm run build:test
调用测试环境接口,打包测试环境npm run build:prod
调用生产环境接口,打包生产环境前端
vue
项目用vue-cli
脚手架安装完成以后,生成的项目中会有build
,config
这两个文件夹vue
在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');
java
在config
文件下新建test.env.js
,将prod.env.js
内容复制过来;
分别在dev.env.js
,test.env.js
,prod.env.js
中定义变量API_ROOT,
dev.env.jswebpack
test.env.jsios
prod.env.jsweb
把build.js 内容复制到test.js
将vue-cli
const webpackConfig = require('./webpack.prod.conf')
修改成:npm
const webpackConfig = require('./webpack.test.conf')
配置axios
请求的时候,接口地址直接调用 process.env.API_ROOT
就行了,
打包的时候执行 npm run build:test
就是调用的测试接口地址json