在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. Unity 本地坐标到世界坐标,世界坐标到本地坐标

    世界=>本地 public GameObject mTarget; public GameObject mPar; //这个注意一定要是mTarget的第一父物体. // Use this fo ...

  2. 抓包工具Charles的使用教程

    参考:https://zhubangbang.com/charlesproxy 如果您是您一次使用Charles,可能对下面的感兴趣. Charles破解版免费下载和安装教程 Charles手机抓包设 ...

  3. 使用mpvue开发小程序教程(二)

    在上篇文章中,我们介绍了使用mpvue开发小程序所需要的一些开发环境的搭建,并创建了第一个mpvue小程序代码骨架并将其运行起来.在本文中,我们来研究熟悉一下mpvue项目的主要目录和文件结构. 在V ...

  4. 自定义微信小程序导航(兼容各种手机)

    详细代码请见github,请点击地址,其中有原生小程序的实现,也有wepy版本的实现 了解小程序默认导航 如上图所示,微信导航分为两部分,第一个部分为statusBarHeight,刘海屏手机(iPh ...

  5. 关于跨DB增量(增、改)同步两张表的数据小技巧

    有些场景下,需要隔离不同的DB,彼此DB之间不能互相访问,但实际的业务场景又需要从A DB访问B DB的情形,这时怎么办?我认为有如下常规的三种方案: 1.双方提供RESET API,需要访问不同DB ...

  6. Angularjs进阶笔记(2)-自定义指令中的数据绑定

    有关自定义指令的scope参数,网上很多文章都在讲这3种绑定方式实现的效果是什么,但几乎没有人讲到底怎么使用,本篇希望聊聊到底怎么用这个话题. 一. 自定义指令 自定义指令,是Angularjs用来实 ...

  7. MySQL数据库性能优化(享学课堂听课笔记)

    1.场景: 2张表A表 200W条数据,关联表B表3W条数据,AB有主外键关系. 案例1. 35S 使用关联子查询,查询时间35S 案例2. 19S 使用连表查询 (Left  join ,Inner ...

  8. win10下rdlc报表在vs(visual studio)中中文显示小方块的批量处理解决方法

    在网上找vs中rdlc报表显示中文时显示小方块的解决方案,无外就是修改文本框的字体属性.但是对于维护已有的rdlc报表时,有中文的地方(此时都显示了小方块)会很多,再一个一个设置实在太麻烦.所以自己花 ...

  9. .net 用ajaxFileUpload 上传超过20M文件设置

    1.在web.config的 <system.web>  节点里面添加   <httpRuntime targetFramework="4.5.2"  execu ...

  10. Java的几道面试题目以及简短回答做个记录保存

      最近没有继续用CSDN写博客了,转到博客园,什么时候自己搭建一个博客就好了. 一 谈谈你对Spring的工作原理的理解 引用一篇博客的讲解,https://www.cnblogs.com/xdp- ...