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的地址。

webpack多环境(dev stg prd qa)打包问题相关推荐

webpack多环境(dev stg prd qa)打包问题 1
针对前后端分离的项目,在多环境部署的时候,不同环境的前端分别调用的后端接口不同,怎么实现呢? 1. 脚本入口地方传入环境信息 "scripts": {"build:dev ...
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)配置详解我们在开发应用的时候,通常同一套程序会被应用和安装到几个不同的环境中,比如开发.测试.生产等.其中每个环境的数据库地址.服务器端口等配 ...

webpack多环境(dev stg prd qa)打包问题

webpack多环境(dev stg prd qa)打包问题

1. 脚本入口地方传入环境信息

2. webpack配置

3.代码中的配置

4.代码中的调用

webpack多环境(dev stg prd qa)打包问题相关推荐

最新文章

热门文章