想實現通過不同的命令,打包調用不同環境的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
就是調用的測試接口地址