.env.local 配置本地环境变量 用于团队开发

.env.local

  • 用途:.env.local 通常用于存储本地开发环境中的环境变量。这些变量可能包括敏感数据或特定于单个开发者的设置,不应该被提交到版本控制系统中。
  • 优先级:在大多数框架中,.env.local 文件中的变量会覆盖其他 .env 文件中的同名变量。这意味着你可以在本地环境中覆盖共享环境变量。
  • 环境:它只在本地开发环境中有效,不应该在生产环境中使用。

使用场景

  • 存储数据库的本地连接字符串
  • 特定于开发者的 API 密钥等。
  • 转发不同的云端开发机地址、端口

在这里插入图片描述

# .env.local
# VITE_PROXY_TARGET="http://10.*.**.33:8888"
VITE_PROXY_TARGET="http://localhost:8888"

vite.config.js

import React from "@vitejs/plugin-react";
import { join } from "path";
import { defineConfig, loadEnv } from "vite";const mode = process.env.NODE_ENV;
const rootDir = process.cwd();
const env = loadEnv(mode, rootDir, "VITE");export default defineConfig({plugins: [React()],build: {minify: env.VITE_MINIFY == "true", // 禁用混淆},resolve: {alias: {"@": join(__dirname, "src"),},},server: {proxy: {"/ros": {target: env.VITE_PROXY_TARGET,changeOrigin: true,ws: true,},},},},
});

在这个给定的代码片段中,mode 和 rootDir 是两个变量,它们分别获得了当前进程环境的一些特定信息。

mode:

mode 变量通过读取 process.env.NODE_ENV 获得。在Node.js环境中,process.env 是一个包含用户环境信息的对象。NODE_ENV 是一个约定俗成的环境变量,通常用来指明程序运行的模式。最典型的值是:

  • “development”:开发模式。通常意味着应用处于开发阶段,不会进行代码压缩,可能包括更详细的日志输出。
  • “production”:生产模式。表示应用正在生产环境中运行。代码可能被压缩和优化,日志输出可能减少以提升性能。
  • “test”:测试模式。通常在自动化测试时使用。
    rootDir:

rootDir:
变量通过调用 process.cwd() 获得。process.cwd() 返回Node.js进程的当前工作目录,即启动Node.js进程时所在的文件夹的路径。这个目录是执行Node.js命令(比如 node 或 npm start)时终端所在的位置,它可以是任何地方,不一定是Node.js应用或脚本所在的目录。

loadEnv:

loadEnv 函数看起来像是被用来加载和解析与Vite相关的环境变量。Vite是一个现代的前端开发与构建工具。在这个上下文中,“VITE”前缀可能意味着该函数将会加载所有以"VITE"开头的环境变量。例如,如果有一个环境变量叫做 VITE_API_URL,那么 loadEnv 函数可能用来获取和解析这个变量的值。

这个函数的参数是 mode、rootDir 和变量名前缀 “VITE”。这表明它会根据当前的运行模式和工作目录加载环境变量。

综上所述,mode 用于确定应用的运行环境,而 rootDir 表示运行命令的文件系统路径。

在vite配置中使用环境变量

环境变量通常可以从 process.env 获得。

注意 Vite 默认是不加载 .env 文件的,因为这些文件需要在执行完 Vite 配置后才能确定加载哪一个,举个例子,root 和 envDir 选项会影响加载行为。不过当你的确需要时,你可以使用 Vite 导出的 loadEnv 函数来加载指定的 .env 文件。

import { defineConfig, loadEnv } from 'vite'export default defineConfig(({ command, mode }) => {// 根据当前工作目录中的 `mode` 加载 .env 文件// 设置第三个参数为 '' 来加载所有环境变量,而不管是否有 `VITE_` 前缀。const env = loadEnv(mode, process.cwd(), '')return {// vite 配置define: {__APP_ENV__: JSON.stringify(env.APP_ENV),},}
})

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vite环境下使用bootstrap

环境 nodejs 18 pnpm 初始化 pnpm init pnpm add -D vite --registry http://registry.npm.taobao.org pnpm add bootstrap popperjs/core --registry http://registry.npm.taobao.org pnpm add -D sass --registry http://registry.npm.taobao.org新建vite.config.js cons…

opencv 按键开启连续截图,并加载提示图片

背景图小图 键盘监听使用的是pynput 库 保存图片时使用了年月日时分秒命名 原图: from pynput import keyboard import cv2 import time# 键盘监听 def on_press(key):global jieglobal guanif key.char a:jie Trueelif key.char d:jie Falseelif key.char…

SpringBoot启动命令过长

Error running DromaraApplication: Command line is too long. Shorten command line for DromaraApplication or also for Spring Boot default configuration?

LeetCode 热题 HOT 100 (010/100)【宇宙最简单版】

【链表】No. 0206 反转链表 【简单】👉力扣对应题目指路 希望对你有帮助呀!!💜💜 如有更好理解的思路,欢迎大家留言补充 ~ 一起加油叭 💦 欢迎关注、订阅专栏 【力扣详解】谢谢你的支持&#xf…

轻松学EntityFramework Core--模型创建

一、使用代码优先(Code-First)创建模型 Code-First 方法是 EF Core 提供的一种用于定义模型的方式,它允许开发人员通过编写 C# 类来定义数据库模式,再通过迁移命令生成数据库表。下面我们来一起看一下代码优先如何使用。 1.1、创…

问题记录-SpringBoot 2.7.2 整合 Swagger 报错

详细报错如下 报错背景,我将springboot从2.3.3升级到了2.7.2,报了下面的错误: org.springframework.context.ApplicationContextException: Failed to start bean documentationPluginsBootstrapper; nested exception is java.lang.NullPo…

MySQL练手 --- 1789. 员工的直属部门

题目链接:1789. 员工的直属部门 这道题虽然是个简单题,但是"坑"倒是不少,所以记录一下 思路: 题目要干: 一个员工可以属于多个部门。当一个员工加入超过一个部门的时候,他需要决定哪个部门是…

导航网站WP主题/WP黑格导航主题BlackCandy-简约酷黑色高逼格+焕然一新的UI设计

源码简介: 导航网站WP主题-WP黑格导航主题BlackCandy,它有着简约酷黑色高逼格,而且有焕然一新的UI设计。它是一个简约漂亮的 WordPress 自媒体主题。黑格网址导航主题,自适应电脑端和手机端。 BlackCandy-V2.0这次全新升级了&am…

mac M1安装Roop教程及所遇到的问题

1.安装miniconda,下载地址: 按 Python 版本划分的最新 Miniconda 安装程序链接:https://docs.anaconda.com/miniconda/miniconda-other-installer-links/ 下载后直接默认安装即可。 我用的是:Python3.10对应的Miniconda 2.下载…

哪个邮箱最安全最好用啊

企业邮箱安全至关重要,需保护隐私、防财务损失、维护通信安全、避免纠纷,并维持业务连续性。哪个企业邮箱最安全好用呢?Zoho企业邮箱,采用加密技术、反垃圾邮件和病毒保护,支持多因素认证,确保数据安全合规…

nodejs - express 学习笔记

express 是一个基于 Node.js 平台的极简、灵活的 WEB 应用开发框架,官方网址:https://www.expressjs. com.cn/ 简单来说,express 是一个封装好的工具包,封装了很多功能,便于我们开发 WEB 应用(HTTP 服务&am…

EasyMedia转码rtsp视频流flv格式,hls格式,H5页面播放flv流视频

EasyMedia转码rtsp视频流flv格式,hls格式 H5页面播放flv流视频 文章最后有源码地址 解决海康视频播放视频流,先转码后自定义页面播放flv视频流 先看效果,1,EasyMedia自带的页面,这个页面二次开发改动页面比较麻烦 …

秋叶大神中文版Stable Diffusion下载安装使用教程

Stable Diffusion是什么? Stable Diffusion是一款开源的AI绘画软件,于2022年发布,由CompVis、Stability AI和LAION的研究人员创建。该软件具有出色的图像生成功能,使用户能够从头开始绘制作品,也可以使用现有的图像进…

Sentinel限流规则详解

上一期教程讲解了 Sentinel 的快速入门:Sentinel快速入门,这一期主要讲述 Sentinel 的限流规则 簇点链路 簇点链路就是项目内的调用链路(Controller -> Service -> Mapper),链路中被监控的每个接口就是一个资源…

Jenkins+Maven+Gitlab+Tomcat自动化构建打包+部署

目录 环境准备 导入项目包 配置jenkins 构建项目 配置项目上线 修改项目代码测试 环境准备 本实操项目环境基于https://blog.csdn.net/Lzcsfg/article/details/140359830 首先在node01主机中操作,本次操作需要java8的版本,将之前安装的java17卸…

Shell编程之正则表达式与文本三剑客

目录 一、正则表达式 1.引言--什么是正则表达式 1.1正则表达式的功能 2.基础正则表达式(BRE) 2.1特殊字符 2.2定位符 2.3非打印字符 3.扩展正则表达式(ERE) 4.元字符操作的案列 二、命令小工具 1.cut:列截取工具 2.sort排序 …

请你谈谈:spring bean的生命周期 - 阶段5:BeanPostProcessor前置处理-自定义初始化逻辑-BeanPostProcess后置处理

BeanPostProcessor的postProcessBeforeInitialization方法是在bean的依赖注入(即属性填充)完成后,但在bean的初始化回调(如PostConstruct注解的方法或InitializingBean接口的afterPropertiesSet方法)之前被调用的。 具…

大数据管理中心设计规划方案(可编辑的43页PPT)

引言:随着企业业务的快速发展,数据量急剧增长,传统数据管理方式已无法满足高效处理和分析大数据的需求。建立一个集数据存储、处理、分析、可视化于一体的大数据管理中心,提升数据处理能力,加速业务决策过程&#xff0…

Hive3:Hive初体验

1、创建表 CREATE TABLE test(id INT, name STRING, gender STRING);2、新增数据 INSERT INTO test VALUES(1, 王力红, 男); INSERT INTO test VALUES(2, 钉钉盯, 女); INSERT INTO test VALUES(3, 咔咔咔, 女);3、查询数据 简单查询 select * from test;带聚合函数的查询 …

自动驾驶-机器人-slam-定位面经和面试知识系列01之常考公式推导(01)

李群李代数扰动bundle adjustment 这个博客系列会分为C STL-面经、常考公式推导和SLAM面经面试题等三个系列进行更新,基本涵盖了自己秋招历程被问过的面试内容(除了实习和学校项目相关的具体细节)。在知乎和牛客也会同步更新,全网…