当前位置: 首页 > news >正文

认识和使用 Vite 环境变量配置,优化定制化开发体验

Vite 官方中文文档:https://cn.vitejs.dev/

环境变量

Vite 内置的环境变量如下:

{"MODE": "development",	// 应用的运行环境"BASE_URL": "/",	// 部署应用时使用的 URL 前缀"PROD": false,	//应用是否正在生产环境中运行"DEV": true,	// 与 PROD 相反,表示应用是否在开发环境中运行。"SSR": false	//应用是否在服务器端渲染模式
}

.env 文件

Vite 启动时会根据运行环境(即启动命令--mode [mode]),从环境目录(默认为index.html 文件所在的位置)中的下列文件加载额外的环境变量,同时将其中的变量注入到 import.meta.env 对象中:

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

注:默认情况下.env文件中的变量需要以 VITE_ 为前缀,自定义变量前缀需要特殊配置。

注:加载的环境变量会以字符串形式注入import.meta.env`,在代码中使用时,需要将其转换为所需的类型。

获取环境变量

在业务代码中获取变量

在项目中使用import.meta.env对象获取环境变量:

<script setup lang="ts">
const title = import.meta.env.VITE_PORT
</script><template><h1>{{ title }}</h1>
</template>

image-20240610200157298

在 HTML 文件中获取变量

在 HTML 文件中获取环境变量时,可以通过%ENV_NAME%语法获取import.meta.env 中的任何属性:

<title>%VITE_APP_TITLE%</title>

注:如果环境变量在 import.meta.env 中不存在,则会将被忽略而不被替换,这与 JS 中不同,在 JS 中会被替换为 undefined

在 vite.config.ts 中获取变量

Vite 默认是不加载 .env 文件的,因为这些文件需要在执行完 Vite 配置后才能确定加载哪一个,举个例子,rootenvDir 选项会影响加载行为。

不过当我们需要在 vite.config.ts 中获取变量时,可以使用 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),},}
})

自定义变量的前缀

自定义 env 变量的前缀,可以在vite.config.ts文件中配置envPrefix

import { defineConfig } from 'vite'// Vite 配置对象
export default defineConfig({envPrefix: 'ENV_', // 环境变量前缀
})

这样以 envPrefix 开头的环境变量就会被注入到import.meta.env对象中。

注:当检测到envPrefix被设置为空字符串''时,Vite 将会抛出错误,防止敏感信息的意外泄漏。

当我们想暴露一个不含前缀的变量,可以使用define设置变量:

export default defineConfig({define: {'import.meta.env.ENV_APP_TITLE': JSON.stringify("My App")}
})

指定加载 .env 文件目录

需要指定 Vite 加载.env文件目录时,需要在vite.config.ts文件中设置envDir属性:

export default defineConfig({envDir: './env', // 环境变量文件目录,可以是一个绝对路径,也可以是相对于项目根的路径
})

修改 Vite 启动配置

我们可以在vite.config.ts文件中直接修改 Vite 启动配置,只是需要做一些特殊处理:由于 Vite 加载.env文件时其中的环境变量会以字符串形式注入 import.meta.env 对象,所以我们需要对其中的 number、boolean 类型的变量进行类型转换。

例如我们希望在项目启动时,占用端口号从默认的 5173 变为 8080 端口,同时在执行完npm run dev命令后自动弹出浏览器访问页面。

在 .env 文件中添加以下变量:

# 端口号
VITE_PORT = 8080# 是否自动打开浏览器
VITE_OPEN = true

vite.config.ts文件中使用loadEnv函数获取当前环境变量,之后将环境变量由字符串类型转为对应类型,最后将配置对象返回:

import { defineConfig, loadEnv } from 'vite' // 引入 Vite 中的 defineConfig 函数
import vue from '@vitejs/plugin-vue' // 引入 Vite 中的 Vue 插件// Vite 配置对象
export default defineConfig(({ mode }) => {// 获取当前环境变量const env = loadEnv(mode, process.cwd())// 转换环境变量 VITE_PORT 为数字类型const port = Number(env.VITE_PORT)// 转换环境变量 VITE_OPEN 为布尔类型const open = Boolean(env.VITE_OPEN)// 配置 Vite 插件return {plugins: [vue()],// 配置开发服务器server: {port: port,open: open,}}
})

执行命令查看占用端口:

image-20240610195813944

http://www.lryc.cn/news/368816.html

相关文章:

  • Java18新特性总结
  • 理解 Java 中的 `final` 关键字
  • 磁盘未格式化:深度解析、恢复方案及预防之道
  • JWT 从入门到精通
  • 31-捕获异常(NoSuchElementException)
  • 使用Spring Boot设计对象存储系统
  • Apple开发者macOS设备与描述文件Profile创建完整过程
  • SpringBootWeb 篇-深入了解 Redis 五种类型命令与如何在 Java 中操作 Redis
  • mysql设置允许外部ip访问,局域网IP访问
  • mac虚拟光驱工具:Daemon Tools for Mac
  • 软考 系统架构设计师系列知识点之杂项集萃(32)
  • Web--CSS基础
  • 服务部署:Linux系统部署C# .NET项目
  • 【机器学习】基于卷积LSTM的视频预测
  • 细说wayland和X11
  • 数据结构:二叉树的实现
  • Helm离线部署Rancher2.7.10
  • Linux目录的作用和常用指令
  • Nvidia/算能 +FPGA+AI大算力边缘计算盒子:隧道和矿井绘图设备
  • MySQL物理备份
  • AWT常用组件
  • CorelDRAW2024破解激活码序列号一步到位
  • Webpack前端打包工具详解
  • 计网总结☞网络层
  • 【全开源】云调查考试问卷系统(FastAdmin+ThinkPHP+Uniapp)
  • 网络安全难学吗?2024该怎么系统学习网络安全?
  • 2 程序的灵魂—算法-2.4 怎样表示一个算法-2.4.6 用计算机语言表示算法
  • 重生之我要精通JAVA--第八周笔记
  • 51单片机独立按键控制LED灯,按键按一次亮,再按一次灭
  • 【上海大学计算机组成原理实验报告】七、程序转移机制