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

news2024/11/8 18:34:17

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.coloradmin.cn/o/1809048.html

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

相关文章

第1章Hello world 3/5:Cargo.lock:确保构建稳定可靠:运行第一个程序

讲动人的故事,写懂人的代码 1.6 Cargo.lock:确保构建稳定可靠 “看!”席双嘉一边指着屏幕一边说,“终端窗口提示符的颜色,从绿变黄了。这就意味着代码在上次提交后有点变化。” 赵可菲:“但是我们只是运行了程序,代码应该没动呀。” 席双嘉敲了下git status -uall,这…

【研发日记】Matlab/Simulink软件优化(三)——利用NaNFlag为数据处理算法降阶

文章目录 前言 背景介绍 初始算法 优化算法 分析和应用 总结 前言 见《【研发日记】Matlab/Simulink软件优化(一)——动态内存负荷压缩》 见《【研发日记】Matlab/Simulink软件优化(二)——通信负载柔性均衡算法》 背景介绍 在一个嵌入式软件开发项目中&#xff0c;需要开…

kubernetes(k8s)集群部署(2)

目录 k8s集群类型 k8s集群规划&#xff1a; 1.基础环境准备&#xff1a; &#xff08;1&#xff09;保证可以连接外网 &#xff08;2&#xff09;关闭禁用防火墙和selinux &#xff08;3&#xff09;同步阿里云服务器时间&#xff08;达到集群之间时间同步&#xff09; &…

上心师傅的思路分享(三)--Nacos渗透

目录 1. 前言 2. Nacos 2.1 Nacos介绍 2.2 鹰图语法 2.3 fofa语法 2.3 漏洞列表 未授权API接口漏洞 3 环境搭建 3.1 方式一: 3.2 方式二: 3.3 访问方式 4. 工具监测 5. 漏洞复现 5.1 弱口令 5.2 未授权接口 5.3.1 用户信息 API 5.3.2 集群信息 API 5.3.3 配置…

前端开发部署:Visual Studio Code + vue

〇 说明 本教程全部采用默认安装路径&#xff0c;因为在进行自定义路径安装的时候&#xff0c;需要配置各种环境变量&#xff0c;在这个配置过程中&#xff0c;可能出现各种很混乱的问题。 一 安装Node.js 1 下载https://nodejs.org/en 2 按照默认NEXT执行 C:\Program Files…

flutter日历范围选择器

1.传入日期跨度&#xff0c;选择上架日期时&#xff0c;自动显示下架日期 2.手动选择上架日期和下架日期(图中下架日期自动填了只需CalendarDateRangePicker在initState方法中使用_startDate widget.initialStartDate; _endDate widget.initialEndDate;&#xff0c;而不直接…

史上最详细四叉树地图不同技术应用和代码详解

四叉树地图在计算机和机器人领域应用的很广&#xff0c;但是初学者可能会发现四叉树地图有各种不同的实现方式&#xff0c;很多在机器人领域不适用或是在计算机存储领域不适用。今天我就讲解下各类四叉树的实现方式和应用场景。 史上最详细四叉树地图不同技术应用和代码详解 本…

出现 Navicat 和 Cmd 下SQL 版本 | 查询不一致的解决方法

目录 1. 问题所示1.1 查询表格不一致1.2 版本不一致2. 原理分析3. 解决方法1. 问题所示 命令行和数据库使用工具出现不一致的情况,分别有如下情况 1.1 查询表格不一致 使用工具查询当地表格: 使用命令行查询当地表格: 1.2 版本不一致 在cmd命令下mysql --version 查询…

Vue3全局封装dialog弹框

Vue3全局封装modal弹框使用&#xff1a; 应用场景&#xff1a;全局动态form表单弹框 应用Vue3碎片&#xff1a; ref&#xff0c;reactive&#xff0c;app.component&#xff0c;defineExpose&#xff0c;defineProps&#xff0c;defineEmits 应用UI: element-plus dialog form …

【设计模式】结构型设计模式之 适配器模式

介绍 适配器模式&#xff08;Adapter Pattern&#xff09; 是一种结构型设计模式&#xff0c;它的核心目的是使接口不兼容的类能够协同工作。适配器模式通过将一个类的接口转换为客户希望的另一个接口&#xff0c;来解决两个已有接口之间不匹配的问题&#xff0c;从而增加它们…

【Vue】声明式导航-自定义类名(了解)

问题 router-link的两个高亮类名 太长了&#xff0c;我们希望能定制怎么办 解决方案 我们可以在创建路由对象时&#xff0c;额外配置两个配置项即可。 linkActiveClass和linkExactActiveClass const router new VueRouter({routes: [...],linkActiveClass: "类名1&quo…

微信小程序毕业设计-网吧在线选座系统项目开发实战(附源码+论文)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;微信小程序毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计…

Hadoop 2.0:主流开源云架构(一)

目录 一、引例&#xff08;一&#xff09;问题概述&#xff08;二&#xff09;常规解决方案&#xff08;三&#xff09;分布式下的解决方案&#xff08;四&#xff09;小结 自从云计算的概念被提出&#xff0c;不断地有IT厂商推出自己的云计算平台&#xff0c;但它们都是商业性…

LeetCode | 997.找到小镇的法官

这道题拿到后很明显是一个图论的简单出度入度问题&#xff0c;法官的标志就是图中出度为0&#xff0c;入度为n-1的结点&#xff0c;而且根据题目条件&#xff0c;满足这一条件的结点有且只有一个 但是我不知道力扣中关于图论的邻接表和邻接矩阵这些数据结构是需要自己写还是已经…

shell编程(三)—— 控制语句

程序的运行除了顺序运行外&#xff0c;还可以通过控制语句来改变执行顺序。本文介绍bash的控制语句用法。 一、条件语句 Bash 中的条件语句让我们可以决定一个操作是否被执行。结果取决于一个包在[[ ]]里的表达式。 bash中的检测命令由[[]]包起来&#xff0c;用于检测一个条…

论文中eps格式图片制作

在提交论文终稿时&#xff0c;有时需要提交论文中图片的eps格式&#xff0c;这里记录一下eps格式图片制作的过程&#xff0c;方便以后查阅。 论文中eps格式图片制作 PPT绘制的图片转换为eps格式使用代码生成的图片Latex中显示的图片大小跟Ai中设定画板的大小不一致 PPT绘制的图…

品牌策划:不只是工作,是一场创意与学习的旅程

你是否认为只有那些经验丰富、手握无数成功案例的高手才能在品牌策划界崭露头角&#xff1f; 今天&#xff0c;我要悄悄告诉你一个行业内的秘密&#xff1a;在品牌策划的世界里&#xff0c;经验虽重要&#xff0c;但绝非唯一。 1️、无止境的学习欲望 品牌策划&#xff0c;这…

智能投顾:重塑金融理财市场,引领行业新潮流

一、引言 在数字化浪潮的推动下,金融行业正经历着前所未有的变革。其中,智能投顾作为金融科技的重要分支,以其高效、便捷和个性化的服务,逐渐成为金融理财市场的新宠。本文旨在探讨智能投顾如何引领金融理财新潮流,通过丰富的案例及解决方案,展示其独特的魅力和价值。 二…

Clearedge3d EdgeWise 5.8 强大的自动化建模软件

EdgeWise是功能强大的建模软件&#xff0c;提供领先的建模功能和先进的技术&#xff0c;让您的整个过程更快更准确&#xff01;您可以获得使用自动特征提取和对象识别的 3D 建模&#xff0c;ClearEdge3D 自动建模和对象识别软件通过创建竣工文档和施工验证完成该过程。拓普康和…

Go singlefight 源码详解|图解

写在前面 通俗的来说就是 singleflight 将相同的并发请求合并成一个请求&#xff0c;进而减少对下层服务的压力&#xff0c;通常用于解决缓存击穿的问题。 详解 基础结构 golang.org/x/sync/singleflight singleflight结构体&#xff1a; type call struct {wg sync.WaitGro…