四、Vite 模式 && 环境变量 && env

2023-11-09

参考

  1. Vite官网 环境变量和模式

环境变量

Vite 在一个特殊的 import.meta.env 对象上暴露环境变量。这里有一些在所有情况下都可以使用的内建变量:

  • import.meta.env.MODE: {string} 应用运行的模式。

  • import.meta.env.BASE_URL: {string} 部署应用时的基本 URL。他由base 配置项决定。
    加粗样式

  • import.meta.env.PROD: {boolean} 应用是否运行在生产环境。

  • import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)。

  • import.meta.env.SSR: {boolean} 应用是否运行在 server 上。

这些环境变量会在构建时被静态替换,因此,在引用它们时请使用完全静态的字符串。动态的 key 将无法生效。例如,动态 key 取值 import.meta.env[key] 是无效的

.env 文件

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

例如,执行 vite,则加载的环境变量文件为

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

例如,执行 vite build,则加载的环境变量文件为

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

环境加载优先级

一份用于指定模式的文件(例如 .env.production)会比通用形式的优先级更高(例如 .env)。

另外,Vite 执行时已经存在的环境变量有最高的优先级,不会被 .env 类文件覆盖。例如当运行 VITE_SOME_KEY=123 vite build 的时候。

.env 类文件会在 Vite 启动一开始时被加载,而改动会在重启服务器后生效。

只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码

例如下面这些环境变量:

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

拓展变量

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

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

模式

vite dev 开发模式

当执行 vite dev 时,它会自动加载 .env.development 中可能存在的环境变量:

# .env.production
VITE_APP_TITLE=My App

vite build 生产模式

当执行 vite build 时,它会自动加载 .env.production 中可能存在的环境变量:

# .env.production
VITE_APP_TITLE=My App

若想在 vite build 时运行不同的模式来渲染不同的标题,你可以通过传递 --mode 选项标志来覆盖命令使用的默认模式
例如,如果你想在 staging (预发布)模式下构建应用:

vite build --mode staging

还需要新建一个 .env.staging 文件:

# .env.staging
VITE_APP_TITLE=My App (staging)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

四、Vite 模式 && 环境变量 && env 的相关文章

随机推荐

  • 1093 - You can‘t specify target table ‘api‘ for update in FROM clause

    1093 You can t specify target table api for update in FROM clause 翻译 白话 例 修改 解决 翻译 您不能在 FROM 子句中指定目标表 Table 进行更新 白话 你不能先
  • @PreAuthorize注解详解

    PreAuthorize注解会在方法执行前进行权限验证 支持Spring EL表达式 它是基于方法注解的权限解决方案 只有当 EnableGlobalMethodSecurity prePostEnabled true 的时候 PreAut
  • OpenGL 各个shader的作用和区别

    OpenGL4 0发布了Tessellation shader Control Evaluation shader 到OpenGL4 为止 现在OpenGL已经支持了5种不同类型的shader 1 Vertex Shader 简称VS 2
  • Java必懂之单例模式

    一 背景知识 在所有的主流23中设计模式中 单例模式作为最简单也最容易理解也是使用最普遍的设计模式 他是一种对象创建模式 用于产生一个对象的具体实例 他可以确保系统中一个类只产生一个实例 单例模式的优点如下 1 对于频繁创建的对象 可以省去
  • LeetCode 之 剑指 Offer 16. 数值的整数次方(Java)

    文章目录 LeetCode 之 剑指 Offer 16 数值的整数次方 Java 一 题目 二 解题思路 1 递归 2 迭代 三 代码 1 递归 2 迭代 LeetCode 之 剑指 Offer 16 数值的整数次方 Java 一 题目 剑
  • 恶搞放屁小程序源码

    恶搞放屁小程序源码 无流量主 点击选择一款符合您品味气质的 设置播放参数 然后可以发送伪装二维码 发送给好友 http bbs lxh5068 com 12647 html
  • 关于注册keil的事儿,为啥注册成功之后keil还是提示会限制2K内存

    没别的 套用别人幽默的说法 keil为了安慰你啥都干得出来 编译没通过也不报错 注册失败了也会显示个成功 我拿着手里的注册机 听着歌试了一又一次 都气的快唱起来来了 可是一连接proteus远程调试就失败 debug也不行 马上提示限制2K
  • iphone屏幕突然变暗_iPhone 玩游戏时屏幕突然变暗,来看看是什么原因?

    有没有小伙伴的苹果手机遇到过这种情况 手机打着王者好好的屏幕突然变暗了 而且屏幕亮度调到最大也还是没有亮起来 这到底是怎么回事 后来我仔细研究了一下才知道这其中的原因 朋友们也来看看 一般手机屏幕突然变暗 有两种原因 自动亮度调节未关闭 我
  • C++中的模版

    一 函数模版 函数模板不是一个实在的函数 编译器不能为其生成可执行代码 定义函数模板后只是一个对函数功能框架的描述 当它具体执行时 将根据传递的实际参数决定其功能 函数模板类型自推 能够根据参数类型自动推演出模板类型参数 1 语法格式 te
  • Qt样式表 基础篇(2)

    这部分的内容直接来自Qt官方文档 原滋原味 不做过多介绍和翻译 因为 实在是非常完备了 Qt 帮助文档 目录 Qt Style Sheets Reference 样式表相关资料 List of Stylable Widgets 可设置样式的
  • 输出越界问题 和 long long 的两数加法问题

    做hdu http acm hdu edu cn showproblem php pid 2047 阿牛的牛肉串有感 注意方面一 测试 边界的数值 考虑会不会越界 注意方面二 在使用时注意这一点 如下文 直接相加 和赋值后相加不一样 pay
  • js前置递增和后置递增

    1 单独使用时 效果一样 与其他代码连用时 执行结果不同 2 前置 先自加 后运算 先己后人 后置 先原值运算 后自加 先人后己 3 开发时 大多使用后置递增 减 且代码独占一行 例如 num 或者num
  • Idea中启动一个工程多个实例

    我们有时候经常一个工程启动多个实例 分别占用不同的端口 转载记录如下 step 1 在IDEA上点击Application右边的下三角 弹出选项后 点击Edit Configuration step 2 打开配置后 将默认的Single i
  • ERP制造模块操作与设计--开源软件诞生30

    赤龙ERP制造模块讲解 第30篇 用日志记录 开源软件 的诞生 进入地址 点亮星星 祈盼着一个鼓励 博主开源地址 码云 https gitee com redragon redragon erp GitHub https github co
  • java 代码scope注解_【Spring注解驱动开发】使用@Scope注解设置组件的作用域

    本文内容概览 Scope注解概述 单实例bean作用域 多实例bean作用域 单实例bean作用域如何创建对象 多实例bean作用域如何创建对象 单实例bean注意的事项 多实例bean注意的事项 自定义Scope的实现 Scope注解概述
  • MySQL安装与截图(详解版)

    一 在MySQL官网下载应用程序 二 安装MySQL 三 配置MySQL 四 将bin路径复制 配置MySQL的环境变量 五 登录MySQL mysql u root p 下载MySQL 进入官网MySQL 点击DOWNLOADS 进入DO
  • ElasticSearch bulk批量插入数据

    环境 使用RestHighLevelClient进行bulk操作 代码如下 es 批量存数据的方法 1 创建es clent 2 创建bulk请求体 3 向bulk请求体中添加多个数据 4 发起rest请求 5 关闭client throw
  • el-table在多选模式下,使用分页,回显出问题。

    问题描述 el table在多选模式下 使用分页功能时 回显选中状态时 每次点击分页会默认选中最后一条数据 或者回显混乱 这个问题可以通过设置el table的row key属性来解决 你可以将getRowKeys方法设置为row key属
  • presto函数和hive函数的使用

    最近做大数据分析工作比较多 主要与presto和hive查询引擎打交道 presto在实时计算上真的很快 个人感觉比hive要快10倍吧 但是hive在面向海量数据的分析计算上也是很牛逼的 这里不得不记录下两者在使用上的一些区别 粘贴一段二
  • 四、Vite 模式 && 环境变量 && env

    文章目录 参考 环境变量 env 文件 环境加载优先级 只有以 VITE 为前缀的变量才会暴露给经过 vite 处理的代码 模式 vite dev 开发模式 vite build 生产模式 参考 Vite官网 环境变量和模式 环境变量 Vi