.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.mzph.cn/news/875103.shtml

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

相关文章

分类模型的完整流程及Python实现

1、加载函数和数据集 import numpy as np from sklearn.datasets import load_breast_cancer from sklearn.svm import SVC from sklearn.model_selection import train_test_split from sklearn.preprocessing import StandardScaler import matplotlib.pyplot as plt cancer…

linux系统查历史cpu使用数据(使用sar 查询cpu和网络占用最近1个月历史数据)。

一 sar 指令介绍 在 Linux 系统中,sar 是 System Activity Reporter 的缩写,是一个用于收集、报告和保存系统活动信息的工具。它是 sysstat 软件包的一部分,提供了丰富的系统性能数据,包括 CPU、内存、网络、磁盘等使用情况&am…

SQL中的LEFT JOIN、RIGHT JOIN和INNER JOIN

在SQL中,JOIN操作是连接两个或多个数据库表,并根据两个表之间的共同列(通常是主键和外键)返回数据的重要方法。其中,LEFT JOIN(左连接)、RIGHT JOIN(右连接)和INNER JOIN…

《JavaEE篇》--多线程(2)

《JavaEE篇》--多线程(1) 线程安全 线程不安全 我们先来观察一个线程不安全的案例: public class Demo {private static int count 0;public static void main(String[] args) throws InterruptedException {Thread t1 new Thread(() -> {//让count自增5W次…

HarmonyOS网络请求的简单用法,HttpUtil简单封装

请求网络获取数据 点击按钮发送一个post请求,发送一条string由于此处的返回result.data本身就是一个string,因此不需要转换类型 Button(请求网络).margin({ top: 10 }).fontSize(24).fontWeight(FontWeight.Bold).onClick(() > {httpRequestPost(http…

风格迁移开发记录(DCT-Net)

1.DCT-Net部署 阿里旗下的 modelscope社区,丰富的开源风格迁移算法模型 DCT-Net GitHub链接 git clone https://github.com/menyifang/DCT-Net.git cd DCT-Netpython run_sdk.py下载不同风格的模型如下图每个文件夹代表一种风格,有cartoon_bg.pb, car…

C++STL详解(一)——String接口详解(上)!!!

目录 一.string类介绍 二.string类的构造赋值 2.1string类的拷贝和构造函数 2.2深拷贝 三.string类的插入 3.1push_back 3.2append 3.3操作符 3.4insert 四.string的删除 4.1pop_back 4.2erase 五.string的查找 5.1find 5.2rfind 六.string的比较 6.1compare函…

深入浅出WebRTC—Pacer

平滑发包(Pacer)是 WebRTC 实现高质量实时通信不可或缺的一部分。在视频通信中,单帧视频可能包含大量的数据,如果未经控制地立即发送,可能瞬间对网络造成巨大压力。Pacer 能够根据网络条件动态调整发送速率&#xff0c…

python库(14):Arrow库简化时间处理

1 Arrow简介 Arrow 是一个被称为程序员的时间处理利器的 Python 库。 从诞生起,它就是为了填补 Python 的 datetime 类型的功能空白而生的。为程序员提供了一种更简单、更直观的方式来处理日期和时间。 2 安装Arrow库 pip install arrow -i https://pypi.tuna.ts…

什么是设备运维管理系统?有什么作用?(6款设备运维管理系统推荐)

一、什么是设备运维管理系统? 设备运维管理系统是一种集成了监控、管理、维护和优化设备性能的软件平台。它旨在通过自动化的手段,提高设备运行的可靠性和效率,降低运维成本,并优化资源利用。 设备运维管理系统能够实时监控设备…

【1】Python机器学习之基础概念

1、什么是机器学习 最早的机器学习应用——垃圾邮件分辨 传统的计算机解决问题思路: 编写规则,定义“垃圾邮件”,让计算机执行对于很多问题,规则很难定义规则不断变化 机器学习在图像识别领域的重要应用: 人脸识别…

带您详细了解安全漏洞的产生和防护

什么是漏洞? 漏洞是 IT、网络、云、Web 或移动应用程序系统中的弱点或缺陷,可能使其容易受到成功的外部攻击。攻击者经常试图寻找网络安全中的各种类型的漏洞来组合和利用系统。 一些最常见的漏洞: 1.SQL注入 注入诸如 SQL 查询之类的小代…

BUU [PASECA2019]honey_shop

BUU [PASECA2019]honey_shop 技术栈:任意文件读取、session伪造 开启靶机,我有1336金币,买flag需要1337金币 点击上面的大图,会直接下载图片 抓包看看,感觉是任意文件读取 修改下路径读一下 读到了session密钥是Kv8i…

Springboot validated JSR303校验

1.导入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-validation</artifactId></dependency> 2.测试类 package com.jmj.gulimall.product.testC;import lombok.Data;import javax.val…

C++《类和对象》(中)

一、 类的默认成员函数介绍二、构造函数 构造函数名与类同名内置类型与自定义类型析构函数拷贝构造函数 C《类和对象》(中) 一、 类的默认成员函数介绍 默认成员函数就是⽤⼾没有显式实现&#xff0c;编译器会⾃动⽣成的成员函数称为默认成员函数。 那么我们主要学习的是1&…

Linux环境docker部署Firefox结合内网穿透远程使用浏览器测试

文章目录 前言1. 部署Firefox2. 本地访问Firefox3. Linux安装Cpolar4. 配置Firefox公网地址5. 远程访问Firefox6. 固定Firefox公网地址7. 固定地址访问Firefox 前言 本次实践部署环境为本地Linux环境&#xff0c;使用Docker部署Firefox浏览器后&#xff0c;并结合cpolar内网穿…

手动搭建微型计算机(涉及:CPU、内存、寄存器等)

目录 微型计算机基础元件及作用CPU地址总线数据总线 内存地址总线数据总线内存大小的计算 寄存器先将Z80CPU与TC5517内存相连参考文章 微型计算机基础元件及作用 CPU、内存、I/O CPU 包含地址总线引脚和数据总线引脚。 以Z80CPU为例&#xff1a; 地址总线 地址总线引脚…

Apache Bigtop 正式支持 openEuler,共创大数据新生态

近日&#xff0c;在OpenAtom openEuler&#xff08;简称"openEuler"&#xff09;BigData SIG与Linaro的携手努力下&#xff0c;** Apache Bigtop于2024年7月8日发布的3.3.0新版本中&#xff0c;正式宣告了对openEuler操作系统的原生支持**。这一里程碑式的进展&#…

[微信小程序] css 解决纯数字或字母不自动换行的问题、控制文字行数

效果 css 代码 word-break: break-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;解释 word-break: break-all; 作用&#xff1a;这个属性允许在单词内部进行换行&#xff0c;即使单词很长也…

Mysql - 索引

目录 一、存储引擎 二、索引 索引结构 索引分类 索引语法 联合索引 前缀索引 索引使用规则 最左前缀法则 范围查询使索引失效 字段做运算操作索引失效 字符串字段不加单引号索引失效 字段做前模糊查询索引失效 or连接条件索引失效 数据发布情况索引失效 指定使用…