在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. 用Maven快速生成带有依赖的可执行jar包

    一.背景 最近项目在做微服务的拆分,那么我们想让我们的容器启动更加的轻量级,所以我们选择放弃tomcat等容器,而是通过maven生成带有指定依赖的可执行jar包的方式进行处理,本文我将分享如何通过m ...

  2. Chapter 4 Invitations——22

    "Are you going all by yourself?" he asked, and I couldn't tell if he was suspicious I had ...

  3. 【转载】ASP.NET Core 依赖注入

    本文转自:http://www.jessetalk.cn/2017/11/06/di-in-aspnetcore/ 为什么要写这个博客 DI在.NET Core里面被提到了一个非常重要的位置, 这篇文 ...

  4. C#如何生成缩略图、水印

    1.安装CodeCarvings.Piczard   Install-Package CodeCarvings.Piczard 2.生成缩略图 ImageProcessingJob jobThumb ...

  5. JQuery——选择器

    简单介绍一下什么是选择器:选择器是CSS样式中用来选择页面元素的一个特有的方式,而JQuery的选择器同样也是如此,JQuery的选择器简单的分为一下这几种:1.常用的CSS选择器 标签选择器:E{ ...

  6. Elasticsearch系列(5):深入搜索

    结构化搜索 结构化搜索是指搜索那些具有内置结构数据的过程,比如日期,时间和数字都是结构化的,它们有精确的格式,我们可以对这些格式进行逻辑操作,比较常见的操作包括比较数字或时间的范围,或判定两个值的大小 ...

  7. [LeetCode] 1. Two Sum 两数之和

    Part 1. 题目描述 (easy) Given an array of integers, return indices of the two numbers such that they add ...

  8. REST风格下如何放行静态资源

    在配置DispatcherServlet(前端控制器)时,如果把拦截路径配置成rest风格(即斜杠/),则会将静态资源也一并拦截(比如.css .js ,jpg)为了避免这个情况,可以把拦截路径设置成 ...

  9. es6 常用方法

    来自 https://www.cnblogs.com/lhl66/p/9555903.html 侵删 来自 https://www.cnblogs.com/lhl66/p/8862106.html 侵 ...

  10. JS数组Sort方法的使用

    想用sort方法对数组排下序,代码如下: var nums = "12 645 6 85 81 0 9 365 4 752".split(" ").map(fu ...