webpack多环境(dev stg prd qa)打包问题 1
针对前后端分离的项目,在多环境部署的时候,不同环境的前端分别调用的后端接口不同,怎么实现呢?
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的地址。
webpack多环境(dev stg prd qa)打包问题 1相关推荐
- dev stg prd 开发 测试 生产环境
dev development 开发环境 stg stage 测试环境 prd product 线上环境 转载于:https://www.cnblogs.com/chenzechao/p/108120 ...
- 为何webpack风靡全球?三大主流模块打包工具对比
小编说:前端项目日益复杂,构建系统已经成为开发过程中不可或缺的一个部分,而模块打包(module bundler)正是前端构建系统的核心.Webpack能成为最流行的打包解决方案,并不是偶然.webp ...
- webpack打开项目命令_webpack前端模块打包工具基本使用的详细记录(一)
webpack简介 我们都知道,Webpack 是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等 ...
- (20/24) webpack实战技巧:watch实现热打包和添加代码备注
(20/24) webpack实战技巧:watch实现热打包和添加代码备注 在前面的学习中,我们一直使用webpack-dev-server充当(本地)服务器和完成打包任务,但是当出项目团队联合开发, ...
- React + Typescript + Webpack 开发环境配置
对于复杂或多人开发的 React 项目来说,管理和使用每个组件的 props . state 或许会成为一件让人头痛的事情,而为每一个组件写文档,成本也会比较大,对项目的开发效率也不是最理想的. Ty ...
- React多页面应用5(webpack生产环境配置,包括压缩js代码,图片转码等)
本教程总共7篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1.React多页面应用1(webpack开发环境搭建,包括Babel.热更新等) ----2017 ...
- Java -- 软件开发整体流程;项目环境dev,test,staging,prod
软件开发整体介绍 作为一名软件开发工程师,我们需要了解在软件开发过程中的开发流程, 以及软件开发过程中涉及到的岗位角色,角色的分工.职责, 并了解软件开发中涉及到的四种软件环境.我们将从 软件开发流程 ...
- env中的dev和prd
关于DEV和PRD: 1 SAP IDES.DEV.QAS.PRD都是什么含义? 2 SAP实施方法分几步? 答: 1 SAP系统的IDES.DEV.QAS.PRD分别是其演示练习.开发.质量保证.生 ...
- SpringBoot多环境(dev、test、prod)配置详解
SpringBoot多环境(dev.test.prod)配置详解 我们在开发应用的时候,通常同一套程序会被应用和安装到几个不同的环境中,比如开发.测试.生产等.其中每个环境的数据库地址.服务器端口等配 ...
最新文章
- android8.0 go 机型,安卓8.0良心!还开发了安卓GO, 适配给低配手机,魅族很尴尬!...
- Oracle Dataguard HA (主备,灾备)方案部署调试
- Java I/O不迷茫,一文为你导航!
- 关于MySql数据库设计表与查询耗时分析
- matlab下三维dla模型模拟,Matlab下三维DLA模型模拟
- Wireshark(1):Wireshark基本用法
- 一个小例子对多态简单的理解
- Python学习入门8:新人怎么学习Python
- CSM中一些常见问题的解决方式
- html5数组删除相同数据,js数组相减简单示例【删除a数组所有与b数组相同元素】...
- 设计模式学习之---Adapter(适配器)模式
- 计算两个日期的时间间隔,返回的是时间间隔的日期差的绝对值.
- Android框架揭秘-Android Service Framework
- MySql ALTER用法
- 【能量检测】基于认知无线电的能量检测算法的matlab仿真
- SAP 批导模板(WBS批导为例)
- [bzoj3887][Usaco2015 Jan]Grass Cownoisseur_trajan_拓扑排序_拓扑序dp
- 华为交换机 查ip冲突_华为交换机根据ip查端口号
- 阿里云盘登录空白问题解决
- 非线性电路的分析方法
热门文章
- Android java.lang.RuntimeException: Canvas: trying to use a recycled bitmap android.graphics.Bitmap@
- Elasticsearch之自定义同义词开发实践
- php 支付宝 支付 prepay_id,支付宝微信统一支付
- 使用Python评估Lil John的“拒绝做什么”
- 移植ffplay媒体播放器和sdl2到Android平台
- 記録一次JDK 11下運行JavaFX(IntelliJ IDEA的Maven項目下)
- 手机计算机软件删除了怎么恢复,电脑的程序软件不小心被删掉,该如何恢复?...
- C/C++黑魔法-利用include宏读文件
- 滴滴公布自查进展:免去黄洁莉顺风车事业部总经理职务
- uniapp 阿里云开发微信小程序一键登录