webpack多环境(dev stg prd qa)打包问题
webpack多环境(dev stg prd qa)打包问题
针对前后端分离的项目,在多环境部署的时候,不同环境的前端分别调用的后端接口不同,怎么实现呢?1. 脚本入口地方传入环境信息
"scripts": { "build:dev": "cross-env NODE_ENV=dev node build/build.js", "build:stg": "cross-env NODE_ENV=stg node build/build.js", "build:prd": "cross-env NODE_ENV=prd node build/build.js", "build:qa": "cross-env NODE_ENV=qa node build/build.js" } "devDependencies": { "cross-env": "^5.0.1" }
其中通过cross-env进行NODE环境的设置,其中build/build.js
是webpack的配置
2. webpack配置
plugins: [ new webpack.DefinePlugin({ __ENV__: JSON.stringify(process.env.NODE_ENV) }) ]
webpack
中通过webpack插件DefinePlugin可以在编译器创建一个全局的环境变量__ENV__
,其中存储的就是对应的环境信息(dev stg prd qa)。
3.代码中的配置
api.config.js
/* eslint-disable */ const env = __ENV__ || 'dev'; // 默认是dev const pdfParse = { dev: '...', stg: '...', prd: '...', qa: '...' } const api = { pdfParse: pdfParse[env] } export default api;
4.代码中的调用
import axios from 'axios'; import api from '../../api.config.js'; const BACK_END_URL = api.pdfParse + '/parse/'; axios.get(BACK_END_URL).then(...).catch(...);
这样就能够通过执行不同的npm脚本进行不同环境的打包部署了。例如 npm run build:dev
打包后皆可以部署dev环境了,其调用的后端接口就是api.config.js
中配置的dev的地址。
相关推荐
86276537 2020-11-19
tianhuak 2020-11-24
大牛牛 2020-10-30
flycappuccino 2020-09-27
卢从利 2020-10-10
无忧老猪 2020-10-09
学峰的学习笔记 2020-10-05
85216033 2020-09-16
兄dei努力赚钱吧 2020-09-06
89334799 2020-08-12
ruanhongbiao 2020-08-16
邓博学习笔记 2020-08-03
ningningmingming 2020-07-28
zhongzhiwei 2020-07-27
Jiajinjin 2020-07-27
manimnchn 2020-07-26
xiyoukeke 2020-07-19
ooouuuooouuu 2020-07-19
Proudoffaith 2020-07-18