在package.json中有如下设置:

"scripts": {
    "dev": "node build/dev-server.js",
    "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
    "build:sit": "cross-env NODE_ENV=production env_config=sit node build/build.js",
    "lint": "eslint --ext .js,.vue src"
  },

当运行项目时,cmd中敲命令:npm run dev/npm run build:prod/npm run build:sit/npm run lint,就会运行不同环境下的代码,如开发环境、生产环境等等。

其中cross-env是用于跨平台环境变量配置的工具,支持在window系统、linux系统等多个平台使用同样的代码配置环境变量;

NODE_ENV=production env_config=prod,这句代码的意思是当前运行环境的环境变量,可以通过process.env进行获取,如process.env.NODE_ENV,process.env.env_config等等,process.env是全局变量,通过获取以上两个值来判断当天运行的是生产环境还是开发环境。

webpack开发环境和生产环境切换原理的更多相关文章

  1. 转 通过 spring 容器内建的 profile 功能实现开发环境、测试环境、生产环境配置自动切换

                                      软件开发的一般流程为工程师开发 -> 测试 -> 上线,因此就涉及到三个不同的环境,开发环境.测试环境以及生产环境,通常 ...

  2. 分离Webpack开发环境与生产环境的配置

    这是Webpack+React系列配置过程记录的第五篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

  3. webpack深入场景——开发环境和生产环境配置

    以前自己写一小项目时,webpack的配置基本就是一套配置,没有考虑生产环境和开发环境的区分,最近在做一个复杂的商城项目接触到了webpack的高级配置,经过两天的研究,写出了一份目前来说比叫满意的配 ...

  4. Webpack配置区分开发环境和生产环境

    在项目开发的时候,我们通常会将程序分为开发环境和生产环境(或者叫线上环境),开发环境通常指的是我们正在开发的这个阶段所需要的一些环境配置,也就是方便我们开发人员调试开发的一种环境:生产环境通常指的是我 ...

  5. webpack-dev-middleware 和 webpack-hot-middleware 配置开发环境和生产环境;webpack脚手架;仿vue-cli

    webpack-dev-server更新后自带express服务器,已经不需要自己搭建.vue-cli从17年底左右也换成了最新的webpack-dev-server,而不是用webpack-dev- ...

  6. 手把手教你用webpack3搭建react项目(开发环境和生产环境)(一)

    开发环境和生产环境整个配置源码在github上,源码地址:github-webpack-react 如果觉得有帮助,点个Star谢谢!! (一)是开发环境,(二)是生产环境. 一.首先创建packag ...

  7. Webpack4 学习笔记八 开发环境和生产环境配置

    webpack resolve属性 webpack 区分开发环境和生产环境 webpack resolve属性 该选项的作用是设置模块如何被解析. resolve.alias: 设置别名, 在vue中 ...

  8. angular 配置开发环境、测试环境、生产环境

    1. 配置开发环境.测试环境.生产环境 (1). environment.ts - 开发环境: 用于程序开发 (创建项目时自动生成) export const environment = { prod ...

  9. 项目开发过程中什么是开发环境、测试环境、生产环境、UAT环境、仿真环境?

    项目开发过程中什么是开发环境.测试环境.生产环境.UAT环境.仿真环境? 最近在公司项目开发过程中总用到测试环境,生产环境和UAT环境等,然而我对环境什么的并不是很理解它的意思,一直处于开发阶段,出于 ...

随机推荐

  1. AndroidStudio意外崩溃,电脑重启,导致重启Find In Path...查找功能失效,搜索结果缺失

    解决方案: <AndroidStudio意外崩溃,电脑重启,导致重启打开Androidstudio后所有的import都出错>

  2. 封装cookie设置和获取的简易方法

    (function() { var tool = { expires: "expires", // 过期时间expires path: "path", // 路 ...

  3. Linux~Sh脚本一点自己的总结

    从.netCore开源项目来看,eShopOnContainers来说,它的部署是跨平台的,可以部署在linux,docker上,在linux上运行它也可以写一些集成的小脚本,这是微信工程师为我们提供 ...

  4. 读书笔记之第五回深入浅出关键字---把new说透

    第五回深入浅出关键字---把new说透  ------你必须知道的.net读书笔记 new一个class时,new完成了以下两个方面的内容:一是调用newobj命令来为实例在托管堆中分配内存:二是调用 ...

  5. C# ListBox实现显示插入最新的数据的方法

    在我们使用ListBox控件时,如果我们在里面不断的添加一条条数据,但是在我们添加的数据过多超过了ListBox显示的窗口时(此时会产生滑动条), 发现我们无法看到最新添加的数据.实现倒序显示此处有两 ...

  6. 微信公众平台设置URL和Token接收接口事件推送

    最近做对接微信闪开发票-微信发票名片,里面有个接收用户提交抬头接口是微信推送事件到公众号后台,该事件将发送至开发者填写的URL(登录公众平台进入[开发者中心设置]). 开发者可通过事件推送完成数据统计 ...

  7. Java中string.equalsIgnoreCase("0")与"0".equalsIgnoreCase(string)的区别:

    string.equalsIgnoreCase("0"):如果string为null,会抛出java.lang.NullPointerException异常. "0&qu ...

  8. Java 浅拷贝和深拷贝

    一看就懂的,java深拷贝浅拷贝 将一个对象的引用复制给另外一个对象,一共有三种方式.第一种方式是直接赋值,第二种方式是浅拷贝,第三种是深拷贝.所以大家知道了哈,这三种概念实际上都是为了拷贝对象啊. ...

  9. WebStorm 配置微信小程序开发 用html样式打开wxml 用css样式打开wxss 配置微信小程序提醒

    1.点开preferences 2.搜索找到“File Types” 3.找到"HTML",点击“+”按钮,添加“*.wxml”然后“apply” 4.和3一样,再找到 ‘casc ...

  10. sublime实现背景透明化

    预览 老司机们就不要吐槽背景图了 实现方法 首先下载插件,直接打包下载zip即可 地址:https://github.com/vhanla/SublimeTextTrans 下载完成后解压到packa ...