NodeJs/Vue项目中对process.env的使用

详解process.env.NODE_ENV 一、 简述process.env.NODE_ENV是什么? process 对象是一个全局变量,提供了有关当前 Node.js 进程的信息并对其进行控制。 作为全局变量,它始终可供 Node.js 应用程序使用,无需使用 require()。 它也可以使用 require() 显式地访问: const process = require('process'); process.env属性会返回包含用户环境的对象。 参见environ(7)。 此对象的示例如下所示: { TERM... 阅读详情

NODE_ENV获取环境变量

let env = app.get('env')
let env = process.env.NODE_ENV
//默认 NODE_ENV 为环境变量名称
//可自行在 process.env 对象下定义需要使用的变量,在项目中可以根据
//不同的 env 值设置 defaultUrl 或者其他值

在webpack 打包的项目/Node JS项目中,可以安装 cross-env(跨Win/Linux平台设置 process.env值) 插件,在 package.json 文件中
设置不同的运行脚本,比如:

script:{
    "start": "node build/dev-server.js",
    "buildStag": "cross-env cross-env NODE_ENV=stag  node build/dev-server.js",
    "buildProd": "cross-env cross-env NODE_ENV=production  node build/dev-server.js",
}
//根据上述脚本即可设置不同的 NODE_ENV 值,在文件中设置值或者加载不同的设置文件,以上配置在NODE项目中可正常运行

Vue项目中使用

在使用Vue Cli构建的项目中,
需要将process.env 设置其他变量名进行使用,如:BUILD_ENV
在 package.json 的 script 字段中作如下配置:

  "scripts": {
    "start": "cross-env BUILD_ENV=dev node build/dev-server.js",
    "dev": "cross-env BUILD_ENV=dev  node build/dev-server.js",
    "build": "cross-env BUILD_ENV=dev node build/build.js",
    "buildDev": "cross-env BUILD_ENV=dev  node build/build.js",
    "buildStag": "cross-env BUILD_ENV=stag  node build/build.js",
    "buildProd": "cross-env BUILD_ENV=prod  node build/build.js",
    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
  },

由于搭配webpack重新设置了 process.env 的值,需要在
webpack.dev.conf.js 及 webpack.prod.conf.js 文件中:

webpack.dev.conf.js
new webpack.DefinePlugin({
    'process.env': config.dev.env,
    'process.env.BUILD_ENV': JSON.stringify(process.env.BUILD_ENV)//增加此行
})

webpack.prod.conf.js
new webpack.DefinePlugin({
    'process.env': env,
    'process.env.BUILD_ENV': JSON.stringify(process.env.BUILD_ENV)
})

即在该插件设置并暴露出 process.env 对象后,再增加
process.env.BUILD_ENV 字段并进行赋值

此时,可在前端JS文件中通过 process.env.BUILD_ENV 获得 package.json中的script获得对应值,进行其他操作,比如,引入不同环境的配置文件,如:
在config文件夹中增加 buildConfig 文件夹,其中新建以下3个文件:
dev.config.js stag.config.js prod.config.js,
在每个文件中采用module.exports的方式导出变量,如:

module.exports = {
    BASE_URL: 'https://dev-api.greigreat.com',
    BASE_STATIC_URL:'https://static1.greigreat.com/'
}

在其他文件中使用

//引入环境配置文件
//process.env.BUILD_ENV 为 webpack中的DefinePlugin暴露出的环境变量
const buildConfig = require('./buildConfig/' + process.env.BUILD_ENV + '.config')
export default {
    baseUrl: buildConfig.BASE_URL,
    baseStaticUrl: buildConfig.BASE_STATIC_URL
}

则可以以对象的形式获取 buildConfig并使用

6-人人vue 中启动报错<% if (process.env.NODE_ENV === ‘production‘) { %> <% }else { %> <% } %> npm run dev 运行项目报错:renren-fast-vue 无法正常启动登录页面,显示<% if(process. enV. NODE_ENV===’ production){%><%} else{%><%}%> 只需要一步即可解决: npm run dev 运行项目报错:renren-fast-vue 无法正常启动登录页面,显示<%if(process. enV. NODE_ENV===’ production){%><%} else{%& 阅读详情

相关推荐

别再手动改配置了!用cross-env和.env文件搞定Node.js/Vue项目多环境变量

本文介绍了如何使用cross-env和.env文件高效管理Node.js/Vue项目的多环境变量,解决开发与生产环境配置混乱问题。通过process.env机制和跨平台工具链,实现一键切换环境配置、集中管理变量并确保团队协作安全规范,提升开发效率。

weixin_30535843的博客 451

Node.js中环境变量process.env

原文地址:https://www.jb51.net/article/126838.htm这篇文章主要给大家介绍了关于Node.js中环境变量process.env的一些事,文中通过示例代码介绍的非常详细,对大家学习或者使用node.js具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。前言最近这两天在和运维GG搞部署项目的事儿。碰到一个问题就是,咱们的dev,uat,product...

燕儿归的专栏 1万+

S-function入门及案例详解(3)——S-function进阶案例

目录1.案例描述2.案例详解3.输出波形4.对输入参数进行Mask打包 1.案例描述 设计一个蹦极系统 h为离地面高度,输入参数为长度、质量、离地面高度。 2.案例详解 步骤1.可以修改sfuntmpl函数的名称(这里修改为bengji),并在括号内增加输入参数 参数len,weight,dist分别表示长度、质量、离地面高度;长度用来初始化x0,质量用来初始化m,离地面高度用来初始化h。 function [sys,x0,str,ts,simStateCompliance] = bengji(t,x,u

Wendy的博客 1万+

Nodejs环境变量process.env打包

一、process process 对象是一个(global)全局变量,提供有关当前 Node.js 进程的信息并对其进行控制。 process官方文档 二、process.env process.env 属性会返回包含用户环境的对象,能返回项目运行所在环境的一些信息。 process.env官方文档 三、process.env.NODE_ENV NODE_ENV是一个用户自定义的变量,它的用途是判断生产环境或开发环境。 通过加载.env文件方式配置环境变量 1.在项目根目录创建 .env 文件

lihefei_coder的博客 3836

泛微Ecology9单点登录实战指南:从Token获取到页面跳转

本文提供了一份详尽的泛微Ecology9单点登录实战指南,重点解析了Token跳转式SSO的核心流程。内容涵盖从理解关键参数(如appid、loginid)与一次性Token机制,到通过代码示例演示如何正确调用接口获取Token,并详细说明了拼接不同场景跳转地址的完整规则与安全实践,旨在帮助开发者高效、稳定地实现业务系统与OA门户的无缝集成。

ol789012345的博客 1075

【01、Go与VSCode的安装】

小白学Go语言

wangruil的博客 1537

nodejs学习之process.env.NODE_ENV

process.env.NODE_ENV的使用

qq_36437991的博客 1146

eCognition易康操作教程(一):如何利用eCognition易康软件进行影像分割之棋盘分割、四叉树分割、光谱差异分割

进程执行完成后,植被覆盖区域与裸地区域合并了。第三步:清除分割结果,点击“Image Objects”菜单栏,点击“Delete Level(s)”,选中“ResultLevel1”,点击”ok”删除棋盘分割结果。四叉树分割之后,有的正方形大一些,有的正方形小一些,大说明该区域的光谱特性更加均一,而小说明不太均一。Leve:选择运行算法的矢量层名称,这里选择四叉树分割算法得到的矢量层“ResultLevel2”。Image Layer weights:图层权重,这里设置为“1,1,1,1”。

蒹葭苍苍 4609

Node.js中环境变量process.env详解

Node.js中环境变量process.env详解 process | Node.js API 文档process 进程 | Node.js API 文档 官方解释:process 对象是一个 global (全局变量),提供有关信息,控制当前 Node.js 进程。 作为一个对象,它对于 Node.js 应用程序始终是可用的,故无需使用 require()。 process(进程)其实就是存在nodejs中的一个全局变量,所有模块都可以调用。process 进程 | Node.js API 文档 nod

細水、長流√的专栏 3834

【工控基础】UVW平台踩坑

1 每个轴按顺时针或逆时针走一个距离,就是旋转。 2 图中W动,U轴V轴不动,就是X方向的平移 3 图中U轴V轴同时动,X不动,就是Y方向的平移。

songhuangong123的博客 6957

在 LangGraph 中集成 Skills 增强智能体能力

LangGraph 的核心是通过**状态机 + 节点(Node) + 工具(Tool)**来编排智能体流程,你可以把 Skills 理解为“封装好的工具或可复用的任务流”,下面是一套可落地的集成方案。

lpfasd123的博客 1182

process.env.NODE_ENV详解

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

嘿嘿 4万+

ER图从入门到精通:数据库建模全攻略

本文为数据库建模领域的 ER 图全面指南,系统解析从基础概念到实战应用的核心要点。首先介绍 ER 图的定义、三大组成元素(实体、属性、关系)及三种基础关系类型(一对一、一对多、多对多);其次详解绘制流程,涵盖工具选择(如 Visio、PowerDesigner)、需求分析方法及实体 - 属性 - 关系的分步建模技巧;进一步探讨弱实体、复合属性等高级概念,结合范式理论讲解模型优化策略;针对实体属性混淆、关系类型误判等常见问题提供解决方案;最后通过电商系统、图书馆管理系统等实际案例展示 ER 图设计全流程。

邓邓子的博客 4213

process.env前端环境变量配置教程

1、为什么要配置环境变量在公司,一个项目一般会有开发版本、测试版本、灰度版本和线上版本,每个版本会对应相同或不同的数据库、API地址。为了方便管理,我们通常做成配置文件的形式,根据不同的...

web前端开发 5424

SAE ARP 4761A内容详解

SAE ARP 4761A主要为民用航空系统及设备的安全评估提供指南,帮助制造商和设计者满足FAA的FAR 25.1309等适航标准的要求。该文档旨在为航空器和航空系统设计中涉及的安全评估流程提供一个结构化的框架,并结合一系列工具和方法,如故障树分析(FTA)、依赖图分析(DD)、马尔可夫分析(MA)等,来系统地评估潜在的安全隐患。这一标准不仅适用于大型航空器的设计和评估,还可以应用于各种类型的飞行系统,如无人驾驶飞行器(UAV)和新型的电动垂直起降飞机(eVTOL)。

qq_41854911的博客 3151

STM32F407中文手册

STM32f407中文手册 本参考手册面向应用开发人员,提供有关使用 STM32F405xx/07xx、STM32F415xx/17xx、 STM32F42xxx 和 STM32F43xxx 微控制器存储器与外设的完整信息。STM32F405xx/07xx、STM32F415xx/17xx、STM32F42xxx 和 STM32F43xxx 构成一个微 控制器系列,各产品具有不同的存储器大小、封装和外设。有关订购信息以及器件的机械与电气特性,请参见数据手册。有关 ARM Cortex™-M4F 内核的信息,请参见《Cortex™-M4F 技术参考手册》。

Vue CLI项目里process.env除了区分环境,还能这样玩?几个提升效率的实战技巧

本文深入探讨了Vue CLI项目中process.env的高级应用技巧,超越基础环境区分,包括动态控制UI组件显示、结合Webpack DefinePlugin实现条件编译、组件内优雅访问环境变量等实战方法。这些技巧能显著提升开发效率和代码质量,特别适合Vue开发者优化项目配置。

weixin_30321709的博客 420

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用,资源的后缀为tar.gz格式的压缩包

vue3+vite中process.env

config.ts 与plugins统计新增define 并且新增如上变量。vue3与vue2不同,没有了那个配置文件。加上后仍旧process 会报错。

丿灬安之若死 909

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

Node process.env

Node process.env 在看一些前框框架实现的源码的时候,经常会看到类似如下的代码: if (process.env.NODE_ENV === 'production') { module.exports = require('./prod.js') } else { module.exports = require('./dev.js') } node中有全局变量process表...

GreekMrzzJ的博客 1万+

实习随笔-10、process.env前端环境变量配置教程

一、实现原理 采用nodejs顶层对象中的process.env(进程环境,返回一个包含用户环境信息的对象。)属性,根据各个环境的配置文件区分和切换环境 二、具体操作(以vue项目为例) 1、安装依赖 npm install process 2、在根目录新增区分环境的文件 例如: 开发环境:.env.dev 预发布环境:.env.pre 生产环境:.env.product .dev NODE_ENV = 'development' VUE_APP_TITLE = 'development' /*请求接口地

Code P的博客 651

Vue / React /浏览器中全局获得 nodejs 环境进程 process 变量

配置目标 在开发过程中经常在node环境中配置 process 配置以判断开发环境,除了 process.env.NODE_ENV 在vue中获取,由于浏览器脱离了node环境使得无法使用node中的一些模块,包括 process等信息,在浏览中获取process 对象会得到一个奇怪的对象。 plugins 配置 webpack 提供了一个 DefinePlugin 的插chaji ...

爱开车的彬哥的优快云博客 3290

Vue项目多环境配置实战:从process.env到自动化部署

本文详细介绍了Vue项目中多环境配置的实战方法,从基础的process.env使用到自动化部署的高级技巧。通过.env文件管理、环境变量智能提示、动态配置方案等实用技术,帮助开发者实现开发、测试、预发布和生产环境的无缝切换,提升项目部署效率和安全性。

weixin_28829903的博客 235
上一篇: vue中自定义触屏事件,点击、滑动、左滑、右滑、下滑、上滑、长按
下一篇: axios 上传显示进度
Uncle_long
博客等级 码龄10年 17粉丝 27原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值