想實現經過不一樣的命令,打包調用不一樣環境的API,實現實現前端自動化部署。前端
前端自動化部署工程比較複雜,這裏只介紹經過不一樣的命令,打包的時候調用不一樣環境的API,
例如:npm run build
調用開發環境接口,打包開發環境npm run build:test
調用測試環境接口,打包測試環境npm run build:prod
調用生產環境接口,打包生產環境vue
vue
項目用vue-cli
腳手架安裝完成以後,生成的項目中會有build
,config
這兩個文件夾
webpack
在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');
ios
在config
文件下新建test.env.js
,將prod.env.js
內容複製過來;
分別在dev.env.js
,test.env.js
,prod.env.js
中定義變量API_ROOT,
dev.env.js
web
test.env.js
vue-cli
prod.env.js
npm
把build.js 內容複製到test.js
將json
const webpackConfig = require('./webpack.prod.conf')
修改成:axios
const webpackConfig = require('./webpack.test.conf')
配置axios
請求的時候,接口地址直接調用 process.env.API_ROOT
就行了,
打包的時候執行 npm run build:test
就是調用的測試接口地址測試