vue3环境变量和模式

文章目录

  • 一、vite文档介绍环境变量
    • 1.环境变量
      • 1.1创建文件
    • 2.NODE_ENV 和 模式
      • **2.1`process.env.NODE_ENV`(Node.js 环境变量)**
      • 2.2 **`模式`(mode)**
  • 二、loadEnv获取环境变量(针对在env文件夹下)
    • 2.1创建环境变量文件
    • 2. 使用 loadEnv 加载环境变量
    • 3. 访问环境变量
  • 三、process.env.NODE_ENV 和 .env 文件中配置的 NODE_ENV 的区别和联系


获取环境变量和模式mode值:

console.log('mode模式:main.js里取值', import.meta.env)
console.log('mode模式:vite.config.js里取值', mode)
console.log('环境变量', process.env.NODE_ENV)

一般是使用mode和process.env.NODE_ENV ; 不太使用.env 文件中NODE_ENV(用来知道哪个环境而已)

一、vite文档介绍环境变量

1.环境变量

一定要先阅读一遍环境变量

1.1创建文件

在项目根目录直接创建.env 、.env.beta 、 .env.test 、.env.production;但是有的项目是在env文件下新建这些环境、模式配置

.env 是公共配置;所有环境默认加载,且会被其他环境的值给覆盖的
– 为了防止意外地将一些环境变量泄漏到客户端,只有以 VITE_ 为前缀的变量 才会暴露 给经过 vite 处理的代码
在这里插入图片描述

.env.beta:

这里是引用

2.NODE_ENV 和 模式

NODE_ENV 和 模式是两个东西

这里是引用

2.1process.env.NODE_ENV(Node.js 环境变量)

作用:控制开发工具、调试信息和打包优化的启用或关闭。
NODE_ENV 是 Node.js 中的环境变量,用于定义当前的运行环境,常见的取值包括:

  • development:用于开发环境。这时,Vite 会启动一个本地开发服务器,并启用热更新等开发工具。
  • production:用于生产环境。这时,Vite 会执行项目的生产构建,生成优化后的静态文件。
  • test:用于测试环境,通常在运行测试框架时使用。

在 Vue 3 中,NODE_ENV 由 Vite 自动设置:

启动开发服务器(vite 或 npm run dev)时,NODE_ENV 被设为 development。
进行生产构建(vite build 或 npm run build)时,NODE_ENV 被设为 production。

不要在 .env 文件中设置 NODE_ENV 为非标准值(如 beta)
通常有以下几个标准值:develop、production、test

获取:

console.log('环境变量', process.env.NODE_ENV)

NODE_ENV 是 Node.js 中的环境变量,通常有以下几个标准值

这里是引用
在这里插入图片描述

2.2 模式(mode)

作用:

1.Vite 会根据启动或打包的 mode 的值 加载对应的 .env.[mode] 文件
2.定制化项目配置:不同模式下,可以根据不同的需求配置不同的环境变量,如只线上模式使用某些依赖插件、 API 地址、第三方服务的密钥等。
3.一般创建多个模式管理变量,例如:.env.beta 、 .env.develop 、 .env.test 、.env.production

4.在package.json中定义用于管理和运行项目的脚本命令

例如:npm run test1命令会启动production2环境 使用.env.test2的模式配置

  "scripts": {"dev": "vite --mode beta --host","test1": "NODE_ENV=production2 vite --mode test2 --host","develop": "vite build --mode develop","test": "vite build --mode test","online": "vite build --mode online","build": "vite build","build:electron": "vite build --mode electron","build:prod": "pnpm test && pnpm build:electron","preview": "vite preview","prettier": "npx prettier . --write"},

.env.test2文件:

# 测试环境
NODE_ENV = "test3" // 但是一般这个值写的是mode的值# 测试环境
VITE_APP_SERVEICE = 'http://192.168.100.99:1234'# 测试环境
VITE_APP_PORT = '53021'

这里是引用

获取:

console.log('mode模式:main.js里取值', import.meta.env)
console.log('mode模式:vite.config.js里取值', mode)
console.log('环境变量', process.env.NODE_ENV)

总结:

这里是引用

二、loadEnv获取环境变量(针对在env文件夹下)

正常情况下在项目根目录直接创建.env.beta 、 .env.test 、.env.production;获取值就是使用 console.log('环境变量', process.env.NODE_ENV)

.
.
但是有的项目是在env文件下新建这三个模式配置
在这里插入图片描述

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

在 Vite 中,使用 loadEnv 函数可以方便地加载指定模式下的环境变量文件(如 .env.beta、.env.production 等)。以下是如何使用 loadEnv 的步骤:

2.1创建环境变量文件

确保你的项目根目录下有相应的 .env 文件,例如:

  • .env
  • .env.beta
  • .env.production

这些文件可以包含键值对的环境变量,例如:

# .env.beta
VITE_API_URL=https://beta.api.example.com
VITE_OTHER_CONFIG=some_value

2. 使用 loadEnv 加载环境变量

在 Vite 的配置文件中(通常是 vite.config.js 或 vite.config.ts),可以使用 loadEnv 来加载环境变量。

示例代码:

import { loadEnv, defineConfig } from "vite";export default defineConfig(({ mode }) => {// 加载对应模式的环境变量const env = loadEnv(mode, process.cwd());console.log(env); // 打印当前加载的环境变量return {// Vite 配置define: {'process.env': env, // 可选:将环境变量挂载到 process.env},};
});

3. 访问环境变量

在应用代码中,可以通过 import.meta.env 访问加载的环境变量。例如:

console.log(import.meta.env.VITE_API_URL); // 输出对应环境的 API URL

三、process.env.NODE_ENV 和 .env 文件中配置的 NODE_ENV 的区别和联系

一般是使用mode和process.env.NODE_ENV ; 不太使用.env 文件中NODE_ENV(用来知道哪个环境而已)

这里是引用
在这里插入图片描述

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

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

相关文章

FPGA图像处理之三行缓存

文章目录 一、前言二、FPGA实现三行缓存的架构三、Verilog代码实现四、仿真验证五、输入图像数据进行仿真验证 一、前言 在 FPGA 做图像处理时,行缓存是一个非常重要的一个步骤,因为图像输入还有输出都是一行一行进行的,即处理完一行后再处理…

【Golang】踩坑记录:make()创建引用类型,初始值是不是nil!!

文章目录 起因二、得记住的知识点1. make()切片,初始化了吗?2. make()切片不同长度容量,append时的差别3. 切片是指向数组的指针吗?4. 切片扩容时,重新分配内存,原切片的数据怎么办? 三、咳咳&a…

Linux 安装 JDK 环境

最近有小伙伴不怎么会在 Linux 服务器安装 JDK 环境,小格子给大家总结分享一下,下次直接看这篇文章就可以了。下面以 CentOS 为例。 1. 下载 JDK 安装包 由于 JDK1.8.202 是最后一个免费版本,建议下载此版本。由于在 Oracle 官方网站下载需…

JS | JS之元素偏移量 offset 系列属性详解

目录 一、offset 概述 定位父级 offsetParent 偏移量 offsetWidth offsetHeight offsetLeft offsetTop 计算页面偏移 注意事项 二、offset 与 style 区别 偏移offset 样式style 三、案例 ★ 案例:获取鼠标在盒子内的坐标 ★ 案例:模态框…

软件测试学习笔记丨Pytest的使用

本文转自测试人社区,原文链接:https://ceshiren.com/t/topic/22158 1. 简介 pytest是一个成熟的全功能python测试框架测试用例的skip和xfail,自动失败重试等处理能够支持简单的单元测试和复杂的功能测试,还可以用来做selenium/ap…

2024互联网大厂营收排名:京东/阿里/华为前三,超多技术岗都在热招!

2024年已经过去一大半,各大互联网大厂的竞争如火如荼,营收都取得了不俗的成绩,京东、阿里、华为分别占领前三! 第四第五名则为华为和拼多多。 根据排行榜里的公司名单,小码特意为大家整理了一批各大厂的招聘岗位。 阿…

super()和super().__init__()的解释

一、super 1.基本概念 在python继承当中,super()函数主要用在子类中调用父类的方法。它返回一个特殊对象,这个对象会帮我们调用父类方法 class Parent:def __init__(self, name):self.name namedef say_hello(self):print(f"Hello, Im {self.nam…

【论文#快速算法】Fast Intermode Decision in H.264/AVC Video Coding

目录 摘要1.前言2.帧间模式决策概览2.1 H.264/AVC中的帧间模式决策2.2 发现和动机 3.同质性和平稳性的确定3.1 同质性区域的确定3.2 稳定性区域的决定3.3 整体算法 4.实验结果4.1 IPPP序列的测试4.2 IBBP序列测试 5.结论 《Fast Intermode Decision in H.264/AVC Video Coding》…

基础数据结构——数组(动态数组,二维数组,缓存与局部性原理)

1.概述 在计算机科学中,数组是由一组元素(值或变量)组成的数据结构,每个元素有至少一个索引或键来标识 因为数组内的元素是连续存储的,所以数组中元素的地址,可以通过其索引计算出来,例如&…

C# 字符串处理与正则表达式

在C#中,字符串(string)是一个非常重要的数据类型,用于表示文本数据。C#提供了一系列丰富的方法和属性来处理字符串,包括拼接、截取、查找、替换、格式化等操作。 字符串拼接 可以使用运算符来拼接字符串。也可以使用St…

三、Linux 安装全攻略

Linux 安装全攻略 在当今的科技时代,Linux 操作系统以其稳定性、安全性和高度的可定制性而备受青睐。本文将详细介绍 Linux 的安装过程,包括关键步骤和下载资源获取方式,帮助你顺利踏上 Linux 之旅。 一、为什么选择 Linux Linux 有许多优…

HTTP协议基础

目录 HTTP是什么 HTTP请求(get与post) GET 方法: POST 方法: url的基本构成 常见的请求头与响应头 请求头(Request Headers) 响应头(Response Headers) HTTP相应码 100系…

生产力工具|vscode for mac的安装python库和使用虚拟环境(一)

一、在vscode中运行python代码(mac或windows) (一)在vscode中安装Python插件 若想在vscode中高效率的编辑Python代码,需要安装Python插件,点击下图中红框内的按钮: 然后在左上角的搜索框中输入…

Android13 添加运行时权限

在一些场景下,需要给app 添加运行时权限,这样就不需要在使用的时候再去点击授权。 直接上代码: --- a/services/core/java/com/android/server/pm/permission/DefaultPermissionGrantPolicy.javab/services/core/java/com/android/server/pm…

uniapp展示本地pdf + 自定义标题

概要 本文主要讲述uniapp打包的Android项目如何展示本地的PDF文件,并设置标题 需求分析 1、因为是打包的Android项目展示本地的PDF文件,首先需要拿到这个本地的PDF文件路径 2、如何在uniapp的vue页面中展示PDF,因为没有直接展示PDF文件的…

探讨Node.js生态中的npm与npx工具

在Node.js生态中,npm和npx是两个重要的工具,它们的功能虽然有所重叠,但使用场景却不同。理解它们的区别可以帮助开发者更高效地管理项目依赖与执行工具。 npm与npx的区别 npm:主要用于管理项目依赖。通过 npm install&#xff0…

Vue前端开发2.1 单文件组件

文章目录 一、单文件组件概念二、单文件组件构成1. 模板(Template)2. 样式(Style)3. 逻辑(Script) 三、单文件组件演示1. 创建Vue项目2. 启动Vue项目3. 用VS Code打开项目4. 清空样式文件代码5. 创建欢迎组…

【redis】热点key问题

【redis】热点key问题 【一】什么是热点key问题【二】什么样的key被称为热key【三】热点Key问题的危害【四】如何监控发现热点key【五】热点Key的解决方案【1】使用二级缓存【2】将热key分散到不同的服务器中【3】热key拆分【4】将核心/非核心业务做Redis的隔离 【六】业界已有…

Nature 正刊丨细菌免疫蛋白直接感知两种不同的噬菌体蛋白

01摘要 真核先天免疫系统使用模式识别受体通过检测病原体相关的分子模式来感知感染,然后触发免疫反应。细菌也进化出了类似的免疫蛋白,可以感知其病毒捕食者的某些成分,即噬菌体1,2,3,4,5,6。尽管不同的免疫蛋白可以识别不同的噬菌体编码的触…

log4j2.xml

log4j2.xml 1、log4j2.xml使用2、日志器的流程解析2.1、几个重要的类2.2、整体流程图 3、部分源码3.1、通过简单例子看源码3.2、log4j2.xml配置指导 如侵权&#xff0c;请联系&#xff0c;无心侵权&#xff5e; 如有错误&#xff0c;也请指正。 1、log4j2.xml使用 <?xml v…