webpack实现开发、测试、生产等环境的打包切换
使用webpack构建的工程,在开发过程中不同环境的配置不同,在各种环境的打包切换过程中需要手动修改相关配置达到预期目的。但是每次都手动修改会比较麻烦,本文简单介绍如何通过对webpack进行配置,实现不同环境打包分类配置;
1.修改build文件夹下build.js文件
添加声明变量
修改前
修改后
2.修改config文件夹下prod.env.js文件
添加不同环境的名称
修改前
修改后
3.修改不同环境下的请求域名地址(我在项目中新建了src/modules/http.js文件夹放置代码)
修改前
打包的时候需要通过修改变量getApiUrl等的地址配置来区分不同环境的包
如当前运行npm run build产生的包为测试环境的包,适用于测试人员进行测试。待项目需要上线时需要修改http为https并将test去掉再运行npm run build打包的为生产环境的包,用于项目上线使用,来回的修改比较麻烦。
修改后
这样就可以将不同环境的接口域名地址进行分类管理,打包的时候只需要运行npm run build pro既可以完成生产环境的打包。
原文:https://blog.csdn.net/Joy_qxz/article/details/79498110?utm_source=copy
---------------------
外挂:参考了作者的方法配置成功上线,后来又发现了另一种思路:
可以通过地址栏获取域名,判断是测试环境还是生产环境,区分对应环境的地址,然后 main.js 引入 挂载vue,就可以通过统一变量进行地址的访问 ,上到生产、测试环境 都不需要更改地址了 自动改;
这样更改省去了每次单独打包
webpack实现开发、测试、生产等环境的打包切换的更多相关文章
- 用前端姿势玩docker【四】基于docker快速构建webpack的开发与生产环境
目录 用前端姿势玩docker[一]Docker通俗理解常用功能汇总与操作埋坑 用前端姿势玩docker[二]dockerfile定制镜像初体验 用前端姿势玩docker[三]基于nvm的前端环境构建 ...
- VUE 如何分环境打包(开发/测试/生产)配置
前言 之前小玲一直处于更新,迭代项目的状态,开发环境.测试环境.生产环境都是前辈配置好的,自己几乎没有配置过,这次做几个新项目时,面临着上线,需要分环境打包配置,于是在网上遨游了一会会,摸索着按照网上 ...
- webpack根据开发与生产环境配置不同变量--webpack.DefinePlugin
webpack有一个DefinePlugin接口,可以实现根据开发与生产环境配置不同变量.范例如下: 需求:开发环境请求baseUrl = '':生产环境请求 baseUrl = 'http://lo ...
- dev stg prd 开发 测试 生产环境
dev development 开发环境stg stage 测试环境prd product 线上环境
- maven工程仿springboot手写代码区分开发测试生产
读取代码: package com.jz.compute.mc.v2.config; import java.util.Enumeration; import java.util.ResourceBu ...
- springboot区分开发、测试、生产多环境的应用配置
转:https://blog.csdn.net/daguairen/article/details/79236885 springboot区分开发.测试.生产多环境的应用配置(一) Spring可使用 ...
- webpack开发与生产环境配置
前言 作者去年就开始使用webpack, 最早的接触就来自于vue-cli.那个时候工作重点主要也是 vue 的使用,对webpack的配置是知之甚少,期间有问题也是询问大牛 @吕大豹.顺便说一句,对 ...
- 转 通过 spring 容器内建的 profile 功能实现开发环境、测试环境、生产环境配置自动切换
软件开发的一般流程为工程师开发 -> 测试 -> 上线,因此就涉及到三个不同的环境,开发环境.测试环境以及生产环境,通常 ...
- (17/24) webpack实战技巧:生产环境和开发环境并行设置,实现来回切换
1. 概述 生产环境和开发环境所需依赖是不同: --开发依赖:就是开发中用到而发布时用不到的.在package.json里面对应的就是devDependencies下面相关配置. --生产依赖: 就是 ...
随机推荐
- Entity Framework入门教程(4)---EF中的实体关系
这一节将总结EF是怎么管理实体之间的关系.EF与数据库一样支持三种关系类型:①一对一 ,②一对多,③多对多. 下边是一个SchoolDB数据库的实体数据模型,图中包含所有的实体和各个实体间的关系.通过 ...
- Java 基础知识点
很多 Java 基础的东西都忘记了, 有必要再复习一些基本的知识点. 本文主要参考 https://github.com/Snailclimb/JavaGuide ================== ...
- Spark Java API 之 CountVectorizer
Spark Java API 之 CountVectorizer 由于在Spark中文本处理与分析的一些机器学习算法的输入并不是文本数据,而是数值型向量.因此,需要进行转换.而将文本数据转换成数值型的 ...
- [译]Ocelot - Configuration
原文 这里有一个配置的样例.配置主要有两个部分.一个是ReRoutes数组,另一个是GlobalConfiguration.ReRoute告诉Ocelot怎么处理上游的请求.Global config ...
- DevExpress设置默认皮肤及各种皮肤样式
DevExpress设置默认皮肤及各种皮肤样式 设置默认皮肤代码: 在程序入口Program.cs里添加如下代码 引用using DevExpress.LookAndFeel; UserLookAnd ...
- Laravel 服务容器,IoC,DI
DI DI 就是常说的依赖注入,那么究竟什么是依赖注入呢? 打个比方,电脑(非笔记本哈)需要键盘和鼠标我们才能进行操作,这个‘需要’换句话说就是‘依赖’键盘和鼠标. 那么,相应的,一个类需要另一个类才 ...
- 微信小程序-制作简易豆瓣笔记
demo截图: 图书: 电影: 共工欲善其事,必先利其器: 小程序编辑器下载地址 : https://mp.weixin.qq.com/debug/wxadoc/dev/dev ...
- linux下 vi命令编辑/etc/my.cnf
把my.cnf配置文件加个max_connections包括(插入命令,删除命令,修改命令.退出保存命令) 你要有这个文件写权限,shell下输入: vi /etc/my.cnf 进入vi后,按i移动 ...
- 2、使用rpm包安装grafana
Grafana最新版本4.3.1安装从官网下载相关的rpm包 http://docs.grafana.org/installation/rpm/ 1.下载二进制包,安装 [root@localhost ...
- HTTP Status 500 - java.lang.reflect.InvocationTargetException
type Exception report message java.lang.reflect.InvocationTargetException description The server enc ...