如何设置process.env.NODE_ENV生产环境模式

在开始之前我先强调一下: process.env.NODE_ENV默认只有两种状态即development和production,development指代本地开发即localhost环境(本地的开发),而production代表发布在任何服务上的服务(不管是dat、uat还是生产环境),node是不知道你服务是测试还是正式,除非你手动指定。通常认为都是线上环境。所以可以这样认为development代表本地开发环境,production代表线上环境(包括dat、uat和生产环境等)

我为什么会强调这一点呢?

因为有人居然用process.env.NODE_ENV中的development来代表dat,uat等线上的测试环境,所以特别强调一下,development代表本地的开发环境。

最近系统接入了公司的单点登录,为了登陆成功后再跳回系统的主页面,又申请了测试和沙箱的域名(之前都是直接用IP登的),本地开发是配置的host。接入之后发现了一个非常麻烦的点就是给单点登录传的跳转地址每次都要修改,开发的时候要写成开发的域名,测试的时候要改成测试的域名,进沙箱的时候要改成跳转沙箱的域名,上线的时候又要改成线上的域名。特别是在测试阶段,开发测试来回切换,不胜其烦。
于是就想把它写成配置文件,根据不同环境加载不同的配置,这样就不用来回改了。这个时候,process.env就跳入了脑海。

扒一扒process.env

process对象是全局变量,它提供当前node.js的有关信息,以及控制当前node.js的有关进程。因为是全局变量,它对于node应用程序是始终可用的,无需require()。

既然process都是一个对象了,env自然是它的一个属性,这个属性返回包含用户环境信息的对象。在终端输入node后,在输入process.env可以看到打印出来的信息。

主角出场 process.env.NODE_ENV

NODE_ENV不是process.env对象上原有的属性,那它是怎么添加上的呢?

先举个例子:

在package.json中,如下:

{
  "name": "yun-nobile",
  "version": "2.0.0",
  "description": "太保标准移动端产品2.0,基于vue",
  "main": "yunprod.js",
  "scripts": {
    "build": "cross-env NODE_ENV=production node yunprod.js build",
    "dev": "node yunprod.js dev"
  }
  ...
}

在我们执行 npm run build 脚本命令时,会执行cross-env NODE_ENV=production node yunprod.js build,把NODE_ENV设置为production,所以 process.env.NODE_ENV就被设置为production了 。

所以 process.env.NODE_ENV是我们执行脚本命令时添加上去的一个全局环境变量。

process.env.NODE_ENV用来确定当前所处的开发阶段。一般生产阶段设为production,开发阶段设为develop,然后在脚本中读取process.env.NODE_ENV。
运行脚本时,可以这样改变环境变量, 在package.json文件的scripts里面添加命令:

NODE_ENV=production node build.js

但是这个命令使用Windows的同学拉下代码后就报错了,因为Windows上面设置的方式不一样

set NODE_ENV=production node build.js

但是不同电脑上不同的设置肯定是不行的呀,这个时候cross-env赶来救场了。
cross-env可以跨平台的设置和使用环境变量

npm install --save-dev cross-env

接下来我们就可以通过cross-env来设置了

cross-env NODE_ENV=production node build.js

这样设置之后,我们可以在脚本中使用process.env.NODE_ENV了,但是不能在模块中使用,要想在模块当中直接使用,我们还需要一些配置

在 webpack 4+ 中,你可以使用 mode 选项:

module.exports = {
  mode: 'production'
}

但是在 webpack 3 及其更低版本中,你需要使用 DefinePlugin:

var webpack = require('webpack')

module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
}

这样就可以直接使用啦_
现在我们要在模块中根据环境变量来配置不同的url了

let url = '';
 if (process.env.NODE_ENV === 'testing') {
   url = 'http://my.test.cn';
 } else if (process.env.alpord === 'alpord') {
   url = 'http://my.alpord.cn';
 } else if (process.env.NODE_ENV === 'production') {
   url = 'http://my.product.cn';
 } else {
   url = 'http://my.develop.cn';
 }

或者是

let url = '';
process.env.NODE_ENV === 'production'?url = 'http://my.product.cn':url = 'http://my.test.cn';

到此这篇关于如何设置process.env.NODE_ENV生产环境模式的文章就介绍到这了,更多相关process.env.NODE_ENV设置生产环境模式内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2021-09-14

深入理解webpack process.env.NODE_ENV配置

在node中,有全局变量process表示的是当前的node进程.process.env包含着关于系统环境的信息.但是process.env中并不存在NODE_ENV这个东西.NODE_ENV是用户一个自定义的变量,在webpack中它的用途是判断生产环境或开发环境的依据的. 为了查看 process的基本信息,我们可以在文件夹中 新建一个 process.js 文件,在里面加一句代码:console.log(process);然后进入该文件夹,执行 node process.js 可以在命令行

深入理解Webpack 中路径的配置

前言 Webpack2 中有很多涉及路径参数配置,若不知其所以然,很容易混淆出错.本文尽可能的汇集了 Webpack2 中涉及路径的配置,力争深入浅出. context context 是 webpack 编译时的基础目录,入口起点(entry)会相对于此目录查找. 默认值为当前目录,webpack设置 context 默认值代码 可以本地下载: this.set("context", process.cwd()); process.cwd()即webpack运行所在的目录(等同pac

深入理解基于vue-cli的vuex配置

本文介绍了基于vue-cli的vuex配置,分享给大家,希望对大家有帮助 首先成功运行vue-cli项目 安装vuex cnpm i vuex --save 修改配置文件 store 新建文件夹store(与router同级)然后在store目录下新建index.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ strict: process.env.

浅谈Webpack下多环境配置的思路

前言 由于前后端分离的前端应用脱离了后端的支持,在单独开发前端应用时,页面调试时使用固定的开发环境地址还好,如果出现在本地开发时需要调试不同环境的远端API,或者需要将应用部署到不同环境的服务器上时,如果不将这些环境对应的服务器地址.环境专属变量等单独配置,也许每次切换环境都需要修改大量代码.网上关于这部分的资料较少,所以下面将以用vue-cli init命令生成的Vue/Webpack项目作为例子,介绍一下我当前正在使用的简单的多环境配置的思路. 1.理想中的多环境配置 在后端开发中,项目中不

Node.js中环境变量process.env的一些事详解

前言 最近这两天在和运维GG搞部署项目的事儿.碰到一个问题就是,咱们的dev,uat,product环境的问题. 因为是前后端分离,所以在开发和部署的过程中会有对后端接口的域名的切换问题.折腾了一下午,查询了各种资料这才把这Node环境变量process.env给弄明白. 下面这就做个问题解决的记录.希望能对这个不明白的人有所帮助.话不多说了,来一起看看详细的介绍吧. Node环境变量 首先,咱们在做react.vue的单页应用开发的时候,相信大家对配置文件里的process.env并不眼生.

webpack+vue-cil 中proxyTable配置接口地址代理操作

在项目开发的时候,接口联调的时候一般都是同域名下,且不存在跨域的情况下进行接口联调,但是当我们现在使用vue-cli进行项目打包的时候,我们在本地启动服务器后,比如本地开发服务下是 http://localhost:8080 这样的访问页面,但是我们的接口地址是 http://xxxx.com/save/index 这样的接口地址,我们这样直接使用会存在跨域的请求,导致接口请求不成功,因此我们需要在打包的时候配置一下,我们进入 config/index.js 代码下如下配置即可: dev: {

vue项目使用.env文件配置全局环境变量的方法

关于文件名:必须以如下方式命名,不要乱起名,也无需专门手动控制加载哪个文件 .env 全局默认配置文件,不论什么环境都会加载合并 .env.development 开发环境下的配置文件 .env.production 生产环境下的配置文件 关于文件内容: 注意:属性名必须以VUE_APP_开头,比如VUE_APP_XXX .env: .env.development: 关于文件的加载: 根据启动命令vue会自动加载对应的环境,vue是根据文件名进行加载的,所以上面说"不要乱起名,也无需专门控制加

详解vue-cli + webpack 多页面实例配置优化方法

本文介绍了vue-cli + webpack 多页面实例配置优化方法,分享给大家 vue+webpack是否有多页面 目前使用vue来做项目,估计大部分都是单页面(SPA)应用,一个轻型的 MVVM 框架,谁用了MVVM框架,就再也回不去JQ时代了,哈哈. 在手机端的项目,使用vue + vue-router是high到爆,不仅仅是我们开发的而言,最主要的用户体检也是开足马力,体检感杠杠的. 那问题来了,使用vue+webpack的单页面是爽到爆,那如果是多页面也能不能high到爆呢?那当然呀,

webpack入门+react环境配置

小结放在前:这篇文章主要是为下一篇的react提前铺好路,webpack是一个前端资源模块化管理和打包工具,说白了就是方便我们管理自己的常用的一些代码,比如你开发中用到sass以及jade同时用到es6,开发时你不可能改动某个地方就挨个命令去转换在到浏览器去看效果,那样效率是非常低的.所以webpack帮我们省去了那些多余的步骤 webpack 基本安装 开始前还是万万不能缺少的安装: npm install webpack -g 安装完接着是建个文件夹新建一个package.json依赖管理文

深入理解 webpack 文件打包机制(小结)

前言 最近在重拾 webpack 一些知识点,希望对前端模块化有更多的理解,以前对 webpack 打包机制有所好奇,没有理解深入,浅尝则止,最近通过对 webpack 打包后的文件进行查阅,对其如何打包 JS 文件有了更深的理解,希望通过这篇文章,能够帮助读者你理解: webpack 单文件如何进行打包? webpack 多文件如何进行代码切割? webpack1 和 webpack2 在文件打包上有什么区别? webpack2 如何做到 tree shaking? webpack3 如何做到