聊聊前端框架中的process.env,env的来源及优先级(next.js、vue-cli、vite)

在平时开发中,常常使用vue、react相关脚手架创建项目,在项目根目录可以创建.env、.env.[mode](mode为development、production、test)、.env.local等文件,然后在项目中就可以通过process.env来访问相关的环境变量了。
下面针对如下问题进行总结:
1.process.env是什么(仅指在Node环境中),来自于哪里,所有项目都能通过process.env访问环境变量吗?
2. .env文件有哪几种,
3. 当同时存在.env、.env.[mode]文件时,process.env取值优先从哪里取?

1.process.env是什么,来源于哪里

1.1 在node中

process :The process object provides information about, and control over, the current Node.js process.(process对象提供有关当前Node.js进程的信息和控制。)
process.env返回一个包含当前用户环境的对象【参考官网】
在这里插入图片描述

1.2 当前用户环境指什么

在操作系统中(本地为windows系统,故以windows系统为例),我们可以在高级系统设置中查看系统的环境变量。
在这里插入图片描述
在这里插入图片描述
而在node运行环境下process.env正好就是返回的当前用户操作系统的环境变量(.env文件中的环境变量将在下面提到,这里指非前端框架里面的js文件能访问到的环境变量)。我们可以创建一个js文件打印process.env,并通过node执行,查看打印结果
在这里插入图片描述

1.3 浏览器环境能访问process.env类似的对象吗

由于浏览器环境并没有提供与操作系统环境变量直接交互的接口,在浏览器中运行的js并不能像在Node.js环境中那样直接访问操作系统的环境变量。
新建一个html文件并将上面打印process.env的js文件引入,在浏览器中打开此html文件,浏览器控制台将报错 process is not defined
在这里插入图片描述

1.4既然浏览器无法访问系统环境变量,为什么目前流行的前端框架在代码中使用了process.env访问环境变量在浏览器中可以正常运行

目前常用的几种前端框架,在本地的运行都是依赖于node环境的,所以在运行时是可以访问process.env的。而部署在线上的项目,在打包时就已经将相关环境变量静态替换了,在浏览器中访问时并没有动态的去访问系统或者文件的环境变量。

2. .env相关文件是什么,怎么使用

在前端开发中,我们常常把环境变量写在.env相关文件中,再通过process.env(vite中使用import.meta.env)进行访问。
这是因为我们使用的框架或者脚手架内置了dotenv等插件,它会将.env相关文件中定义的字段添加到环境变量中

2.1 .env文件有哪几种

一般情况,.env文件有4种情况

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入,但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入,如env.development只在开发环境载入 
.env.[mode].local   # 只在指定的模式中被载入,但会被 git 忽略

nextjs:
在这里插入图片描述
vue-cli:
在这里插入图片描述
vite:
在这里插入图片描述

2.2 env文件中环境变量的定义方式

在env文件中通过 键=值 的方式定义环境变量,需要注意的是,不同的框架在定义环境变量时可能需要键以规定的前缀开头,才能在客户端使用,具体前缀可以查看所使用框架对应官网。
如:
在nextjs中以EXT_PUBLIC_开头的环境变量才能在在浏览器中使用(在服务端没有这个限制)
在这里插入图片描述

2.2 各env文件的优先级
.env(所有环境,最低优先级)
.env.local(所有环境,但忽略于版本控制,高于 .env)
.env.[mode](特定环境,高于 .env 和 .env.local)
.env.[mode].local(特定环境且忽略于版本控制,最高优先级)

如在开发环境中优先级为

.env.development.local > .env.development > .env.local >.env

生产环境中优先级为

.env.production.local > .env.production> .env.local >.env

当高优先级和低优先级文件中都包含某环境变量时,使用高优先级文件中的值

3. 系统环境变量和.env.*文件的优先级

如果系统环境变量中定义了和env文件相同的环境变量那么,优先级为:

系统环境变量>.env.*文件

注:在本地运行环境中,修改系统环境变量后,重新运行项目可能不会立即获取到更新后的值,有时需要重启系统后才能访问到更新后的环境变量

4.动态 or 静态

在编译时,环境变量会被静态替换,所以部署到线上时,使用的环境变量是编译时获取到的环境变量,在运行的容器中相关系统环境变量更新后需要重新编译才能更新系统中对应的环境变量(对于服务端的接口等 访问环境变量,本地验证,也是静态的,但是gpt说是动态的,需要在确认确认,也欢迎大佬赐教)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/947222.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

基于云架构Web端的工业MES系统:赋能制造业数字化变革

基于云架构Web端的工业MES系统:赋能制造业数字化变革 在当今数字化浪潮席卷全球的背景下,制造业作为国家经济发展的重要支柱产业,正面临着前所未有的机遇与挑战。市场需求的快速变化、客户个性化定制要求的日益提高以及全球竞争的愈发激烈,都促使制造企业必须寻求更加高效、智…

LeetCode算法题——螺旋矩阵ll

题目描述 给你一个正整数n,生成一个包含1到n2所有元素,且元素按顺时针顺序螺旋排列的n x n正方形矩阵matrix 。 示例 输入:n 3 输出:[[1,2,3],[8,9,4],[7,6,5]]题解 思路: 将整个过程分解为逐圈填充的过程&#xf…

MySQL 01 02 章——数据库概述与MySQL安装篇

一、数据库概述 (1)为什么要使用数据库 数据库可以实现持久化,什么是持久化:数据持久化意味着将内存中的数据保存到硬盘上加以“固化”持久化的主要作用是:将内存中的数据存储在关系型数据库中,当然也可以…

GPU 进阶笔记(四):NVIDIA GH200 芯片、服务器及集群组网

大家读完觉得有意义记得关注和点赞!!! 1 传统原厂 GPU 服务器:Intel/AMD x86 CPU NVIDIA GPU2 新一代原厂 GPU 服务器:NVIDIA CPU NVIDIA GPU 2.1 CPU 芯片:Grace (ARM)2.2 GPU 芯片:Hopper/B…

vite6+vue3+ts+prettier+eslint9配置前端项目(后台管理系统、移动端H5项目通用配置)

很多小伙伴苦于无法搭建一个规范的前端项目,导致后续开发不规范,今天给大家带来一个基于Vite6TypeScriptVue3ESlint9Prettier的搭建教程。 目录 一、基础配置1、初始化项目2、代码质量风格的统一2.1、配置prettier2.2、配置eslint2.3、配置typescript 3、…

ESLint+Prettier的配置

ESLintPrettier的配置 安装插件 ​​​​​​ 在settings.json中写下配置 {// tab自动转换标签"emmet.triggerExpansionOnTab": true,"workbench.colorTheme": "Default Dark","editor.tabSize": 2,"editor.fontSize": …

Cyber Security 101-Web Hacking-JavaScript Essentials(JavaScript 基础)

任务1:介绍 JavaScript (JS) 是一种流行的脚本语言,它允许 Web 开发人员向包含 HTML 和 CSS(样式)的网站添加交互式功能。创建 HTML 元素后,您可以通过 JS 添加交互性,例如验证、on…

《机器学习》从入门到实战——逻辑回归

目录 一、简介 二、逻辑回归的原理 1、线性回归部分 2、逻辑函数(Sigmoid函数) 3、分类决策 4、转换为概率的形式使用似然函数求解 5、对数似然函数 ​编辑 6、转换为梯度下降任务 三、逻辑回归拓展知识 1、数据标准化 (1&#xf…

JDK8源码分析Jdk动态代理底层原理

本文侧重分析JDK8中jdk动态代理的源码,若是想看JDK17源码分析可以看我的这一篇文章 JDK17源码分析Jdk动态代理底层原理-CSDN博客 两者之间有着略微的差别,JDK17在JDK8上改进了不少 目录 源码分析 过程 生成的代理类大致结构 本文侧重分析JDK8中jdk…

ZYNQ初识6(zynq_7010)clock时钟IP核

基于板子的PL端无时钟晶振,需要从PS端借用clock1(50M)晶振 接下去是自定义clock的IP核封装,为后续的simulation可以正常仿真波形,需要注意顶层文件的设置,需要将自定义的IP核对应的.v文件设置为顶层文件&a…

深度学习模型格式转换:pytorch2onnx(包含自定义操作符)

将PyTorch模型转换为ONNX(Open Neural Network Exchange)格式是实现模型跨平台部署和优化推理性能的一种常见方法。PyTorch 提供了多种方式来完成这一转换,以下是几种主要的方法: 一、静态模型转换 使用 torch.onnx.export() t…

GPU 进阶笔记(一):高性能 GPU 服务器硬件拓扑与集群组网

记录一些平时接触到的 GPU 知识。由于是笔记而非教程,因此内容不求连贯,有基础的同学可作查漏补缺之用 1 术语与基础 1.1 PCIe 交换芯片1.2 NVLink 定义演进:1/2/3/4 代监控1.3 NVSwitch1.4 NVLink Switch1.5 HBM (High Bandwidth Memory) 由…

在Unity中用Ab包加载资源(简单好抄)

第一步创建一个Editor文件夹 第二步编写BuildAb(这个脚本一点要放在Editor中因为这是一个编辑器脚本,放在其他地方可能会报错) using System.IO; using UnityEditor; using UnityEngine;public class BuildAb : MonoBehaviour {// 在Unity编…

【贪心算法】贪心算法七

贪心算法七 1.整数替换2.俄罗斯套娃信封问题3.可被三整除的最大和4.距离相等的条形码5.重构字符串 点赞👍👍收藏🌟🌟关注💖💖 你的支持是对我最大的鼓励,我们一起努力吧!😃&#x1f…

(五)人工智能进阶:基础概念解释

前面我们介绍了人工智能是如何成为一个强大函数。接下来,搞清损失函数、优化方法和正则化等核心概念,才能真正驾驭它! 1. 什么是网络模型? 网络模型就像是一个精密的流水线工厂,由多个车间(层&#xff0…

SpringMVC(二)原理

目录 一、配置Maven(为了提升速度) 二、流程&&原理 SpringMVC中心控制器 完整流程: 一、配置Maven(为了提升速度) 在SpringMVC(一)配置-CSDN博客的配置中,导入Maven会非…

2、redis的持久化

redis的持久化 在redist当中,高可用的技术包括持久化,主从复制,哨兵模式,集群。 持久化是最简单的高可用的方法,作用就是备份数据。即将数据保存到硬盘,防止进程退出导致数据丢失。 redis持久化方式&…

【算法】模拟退火算法学习记录

写这篇博客的原因是博主本人在看某篇文章的时候,发现自己只是知道SGD这个东西,但是到底是个啥不清楚,所以百度了一下,然后在通过博客学习的时候看到了退火两个字,想到了本科做数模比赛的时候涉猎过,就上bil…

Visual Point Cloud Forecasting enables Scalable Autonomous Driving——点云论文阅读(12)

此内容是论文总结,重点看思路!! 文章概述 这篇文章介绍了一个名为 ViDAR 的视觉点云预测框架,它通过预测历史视觉输入生成未来点云,作为自动驾驶的预训练任务。ViDAR 集成了语义、三维几何和时间动态信息,有效提升了感知、预测和规划等自动驾驶核心任务的性能。实验表明…

AI 将在今年获得“永久记忆”,2028美国会耗尽能源储备

AI的“永久记忆”时代即将来临 谷歌前CEO施密特揭示了AI技术的前景,他相信即将在2025年迎来一场伟大的变化。AI将实现“永久记忆”,改变我们与科技的互动过程。施密特将现有的AI上下文窗口比作人类的短期记忆,难以持久保存信息。他的设想是…