Vite学习之环境变量

环境变量

Vite 在一个特殊的 import.meta.env 对象上暴露环境变量,这些变量在构建时会被静态地替换掉。这里有一些在所有情况下都可以使用的5个内建变量:

  • import.meta.env.MODE: {string} 应用运行的模式。
  • import.meta.env.BASE_URL: {string} 部署应用时的基本 URL。他由base 配置项决定。
  • import.meta.env.PROD: {boolean} 应用是否运行在生产环境(使用 NODE_ENV=‘production’
    运行开发服务器或构建应用时使用 NODE_ENV=‘production’ )。
  • import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与
    import.meta.env.PROD相反)。
  • import.meta.env.SSR: {boolean} 应用是否运行在 server 上。

.env 文件

Vite 使用 dotenv 从你的 环境目录 中的下列文件加载额外的环境变量:

文件名使用情况
.env所有情况下都会加载
.env.local所有情况下都会加载,但会被 git 忽略
.env.[mode]只在指定模式下加载
.env.[mode].local只在指定模式下加载,但会被 git 忽略

环境加载优先级
一、一份用于指定模式的文件(例如 .env.production)会比通用形式的优先级更高(例如 .env)。
二、另外,Vite 执行时已经存在的环境变量有最高的优先级,不会被 .env 类文件覆盖。例如当运行 VITE_SOME_KEY=123 vite build 的时候。
三、.env 类文件会在 Vite 启动一开始时被加载,而改动会在重启服务器后生效。

加载的环境变量也会通过 import.meta.env 以字符串形式暴露给客户端源码。

为了防止意外地将一些环境变量泄漏到客户端,只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。例如下面这些环境变量:

.env

VITE_SOME_KEY=123
DB_PASSWORD=foobar

只有 VITE_SOME_KEY 会被暴露为 import.meta.env.VITE_SOME_KEY 提供给客户端源码,而 DB_PASSWORD 则不会。

console.log(import.meta.env.VITE_SOME_KEY) // "123"
console.log(import.meta.env.DB_PASSWORD) // undefined

环境变量解析
如上所示,VITE_SOME_KEY 是一个数字,但在解析时会返回一个字符串。布尔类型的环境变量也会发生同样的情况。在代码中使用时,请确保转换为所需的类型。

此外,Vite 使用 dotenv-expand 来扩展在 env 文件中编写的变量。想要了解更多相关语法,请查看 它们的文档。

请注意,如果想要在环境变量中使用 $ 符号,则必须使用 \ 对其进行转义。

.env

KEY=123
NEW_KEY1=test$foo   # test
NEW_KEY2=test\$foo  # test$foo
NEW_KEY3=test$KEY   # test123

如果你想自定义 env 变量的前缀,请参阅 envPrefix。

安全注意事项
一、.env.*.local 文件应是本地的,可以包含敏感变量。你应该将 .local 添加到你的 .gitignore 中,以避免它们被 git 检入。
二、由于任何暴露给 Vite 源码的变量最终都将出现在客户端包中,VITE_
变量应该不包含任何敏感信息。

TypeScript 的智能提示

默认情况下,Vite 在 vite/client.d.ts 中为 import.meta.env 提供了类型定义。随着在 .env[mode] 文件中自定义了越来越多的环境变量,你可能想要在代码中获取这些以 VITE_ 为前缀的用户自定义环境变量的 TypeScript 智能提示。

要想做到这一点,你可以在 src 目录下创建一个 vite-env.d.ts 文件,接着按下面这样增加 ImportMetaEnv 的定义:

vite-env.d.ts

/// <reference types="vite/client" />interface ImportMetaEnv {readonly VITE_APP_TITLE: string// 更多环境变量...
}interface ImportMeta {readonly env: ImportMetaEnv
}

如果你的代码依赖于浏览器环境的类型,比如 DOM 和 WebWorker,你可以在 tsconfig.json 中修改 lib 字段来获取类型支持。
tsconfig.json

{"lib": ["WebWorker"]
}

导入语句会破坏类型增强
如果 ImportMetaEnv 增强不起作用,请确保在 vite-env.d.ts 中没有任何 import 语句。更多信息请参阅 TypeScript 文档。

HTML 环境变量替换

Vite 还支持在 HTML 文件中替换环境变量。import.meta.env 中的任何属性都可以通过特殊的 %ENV_NAME% 语法在 HTML 文件中使用:

<h1>Vite is running in %MODE%</h1>
<p>Using data from %VITE_API_URL%</p>

如果环境变量在 import.meta.env 中不存在,比如不存在的 %NON_EXISTENT%,则会将被忽略而不被替换,这与 JS 中的 import.meta.env.NON_EXISTENT 不同,JS 中会被替换为 undefined。
正因为 Vite 被许多框架使用,它在复杂的替换(如条件替换)上故意不持任何意见。Vite 可以使用 现有的用户插件 或者一个实现了 transformIndexHtml 钩子 的自定义插件来扩展。

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

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

相关文章

leetcode71:简化路径

给你一个字符串 path &#xff0c;表示指向某一文件或目录的 Unix 风格 绝对路径 &#xff08;以 / 开头&#xff09;&#xff0c;请你将其转化为 更加简洁的规范路径。 在 Unix 风格的文件系统中规则如下&#xff1a; 一个点 . 表示当前目录本身。此外&#xff0c;两个点 ..…

(自用)机器学习python代码相关笔记

一些自存的机器学习函数和详细方法记录&#xff0c;欢迎指错。 前言&#xff1a;读取数据方法 import pandas as pd import pandas as pddf pd.read_csv(数据集.csv, header0) # header是从哪一行开始读起&#xff0c;一般是0&#xff0c;也可以取infer 一、数据处理&#…

springboot框架使用RabbitMQ举例代码

以前分享过一个理论有兴趣的小伙伴可以看下 https://blog.csdn.net/Drug_/article/details/138164180 不多说 还是直接上代码 第一步&#xff1a;引入依赖 可以不指定版本 <!-- amqp --><dependency><groupId>org.springframework.boot</groupId…

vscode 创建 vue 项目时,配置文件为什么收缩到一起展示了?

一、前言 今天用 vue 官方脚手架创建工程&#xff0c;然后通过 vscode 打开项目发现&#xff0c;配置文件都被收缩在一起了。就像下面这样 这有点反直觉&#xff0c;他们应该是在同一层级下的&#xff0c;怎么会这样&#xff0c;有点好奇&#xff0c;但是打开资源管理查看&…

php开发实战分析(8):优化MySQL分页查询与数量统计,提升数据库性能

在开发过程中&#xff0c;我们遇到了一段用于从数据库中查询部门信息的PHP代码。该代码负责根据不同的条件&#xff08;如部门名称和来源&#xff09;筛选数据&#xff0c;并返回分页结果及总记录数。然而&#xff0c;原始代码存在一些问题&#xff0c;包括重复的查询条件构建逻…

大学适合学C语言还是Python?

在大学学习编程时&#xff0c;选择C语言还是Python&#xff0c;这主要取决于你的学习目标、专业需求以及个人兴趣。以下是对两种语言的详细比较&#xff0c;帮助你做出更明智的选择&#xff1a; C语言 优点&#xff1a; 底层编程&#xff1a;C语言是一种底层编程语言&#x…

数据结构,问题 F: 括弧匹配检验

题目描述 假设表达式中允许包含两种括号&#xff1a;圆括号和方括号&#xff0c;其嵌套的顺序随意&#xff0c;如&#xff08;&#xff3b; &#xff3d;&#xff08;&#xff09;&#xff09;或&#xff3b;&#xff08;&#xff3b; &#xff3d;&#xff3b; &#xff3d;&a…

yolov8涨点系列之优化器替换

文章目录 优化器替换的重要性加速收敛速度提高模型精度增强模型的泛化能力适应不同的数据集和任务特点 优化器替换步骤(1)准备代码&#xff1a;(2)导入优化器(3)替换优化器 本文将以替换Lion为优化器的方式展示如何对Ultrayluic的yolov8进行优化器替换。 优化器替换的重要性 加…

Vue 学习随笔系列十三 -- ElementUI 表格合并单元格

ElementUI 表格合并单元格 文章目录 ElementUI 表格合并单元格[TOC](文章目录)一、表头合并二、单元格合并1、示例代码2、示例效果 一、表头合并 参考&#xff1a; https://www.jianshu.com/p/2befeb356a31 二、单元格合并 1、示例代码 <template><div><el-…

每天10个vue面试题(七)

1、Vue如何监听页面url中hash变化&#xff1f; 监听 $route 的变化&#xff1a;在Vue中&#xff0c;你可以使用watch属性来监听$route的变化。当路由发生变化时&#xff0c;会执行相应的处理函数。使用 window.location.hash&#xff1a;直接读取window.location.hash的值。这…

C++ -- 模板进阶

非模板类型参数 模板参数分为类型形参与非类型形参。类型形参&#xff1a;出现在模板参数列表中&#xff0c;跟在class 或 typename之类的参数类型名称。非类型形参&#xff1a;就是用一个常量作为类(函数)模板的一个参数&#xff0c;在类(函数)模板中将该参数当成常量来使用。…

今日 AI 简报|零样本视频生成、移动端轻量语言模型、自动驾驶多模态模型等前沿 AI 技术集中亮相

❤️ 如果你也关注大模型与 AI 的发展现状&#xff0c;且对大模型应用开发非常感兴趣&#xff0c;我会快速跟你分享最新的感兴趣的 AI 应用和热点信息&#xff0c;也会不定期分享自己的想法和开源实例&#xff0c;欢迎关注我哦&#xff01; &#x1f966; 微信公众号&#xff…

SQL中的IN语句和EXISTS语句

大家好&#xff0c;使用SQL时经常需要根据其他表的值过滤数据&#xff0c;常见方法是使用IN和EXISTS子句。这两者都用于检查子查询中值的存在&#xff0c;但它们的工作方式略有不同&#xff0c;并可能对性能产生不同影响。本文将探讨IN和EXISTS的定义、工作原理及其使用场景&am…

【解决方案】Mac上禁止chrome自动更新的三种方法

【目的需求】 新版chrome直接用打印机打印页面时&#xff0c;打印任务总是响一下就消失了&#xff0c;使用safari浏览器无此问题&#xff0c;使用早期版本chrome也没有这一问题。因此想固定chrome版本&#xff0c;不要自动更新。尝试了网上的多种方法均失败。 【解决方案】 …

【运维管理】如何像管理linux一样,批量管理windows主机

很多小伙伴在维护的时候也会难免遇见批量的windows操作&#xff0c;那么一定有人就会问是否有方法可以用命令来批量操作windows主机&#xff0c;其实非常简单&#xff0c;windows早就为我们提供了一个内置的批量管理工具&#xff0c;那就是这个强大的POWERSHELL&#xff0c;今天…

如何监控员工上网行为?实现精准监控员工上网行为的5个妙招分享!(企业:稳了!)

如何监控员工上网行为&#xff1f; 员工上班时的"摸鱼"行为员工上网行为&#xff08;做与工作无关的活动&#xff0c;如浏览社交媒体、游戏、网购等&#xff09;&#xff0c;不仅影响工作效率&#xff0c;还可能破坏团队氛围&#xff0c;阻碍企业发展。 那么&#…

迷茫内耗的一天

迷茫的一天 今天看了看动态规划&#xff0c;不知不觉看了三四个小时&#xff0c;英语也没背&#xff0c;项目也已经停止了一个星期就看了几个小时的xml文件(不停ctrlB)&#xff0c;好累&#xff0c;感觉要学的好多。这难道是必经之路吗&#xff1f; 一个星期算法已经刷了40道题…

Allegro: 开源的高级视频生成模型

我们很高兴地宣布 Allegro 的开源发布&#xff0c;这是 Rhymes AI 先进的文本到视频模型。Allegro 是一款功能强大的人工智能工具&#xff0c;能将简单的文字提示转化为高质量的视频短片&#xff0c;为人工智能生成视频领域的创作者、开发者和研究人员开辟了新的可能性。我们希…

<项目代码>YOLOv8 猫狗识别<目标检测>

YOLOv8是一种单阶段&#xff08;one-stage&#xff09;检测算法&#xff0c;它将目标检测问题转化为一个回归问题&#xff0c;能够在一次前向传播过程中同时完成目标的分类和定位任务。相较于两阶段检测算法&#xff08;如Faster R-CNN&#xff09;&#xff0c;YOLOv8具有更高的…

「Mac畅玩鸿蒙与硬件21」鸿蒙UI组件篇11 - Canvas 组件的静态进阶应用

在鸿蒙应用开发中,Canvas 组件不仅用于基础绘图,还提供了处理复杂路径和渐变效果的多种手段,帮助开发者实现精美的静态图形。本篇将介绍如何在 Canvas 中绘制复杂路径、创建渐变填充效果。 关键词 Canvas 组件复杂路径绘制渐变填充一、Canvas 的复杂路径绘制 Canvas 提供了…