vue配置開發,測試,生產環境api(打包方式)


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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM