构建模式

defineConfig 接收参数 { mode }，这里的 mode 就是构建的模式

import { defineConfig } from 'vite';export default defineConfig(({ mode }) => {console.log('mode', mode);
});
"scripts": {"dev": "vite", // 执行 `vite`, mode 为 development"build": "vite build" // 执行 `vite build`, mode 为 production
},

mode 还可以被显式地传入：

"scripts": {"dev": "vite --mode testing", // 执行 `vite`, mode 为 testing
},

配置文件

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

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

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

获取环境变量

在服务端：

我们需要使用 loadEnv(mode, envDir[, root]) 获取环境变量，参数：① mode-构建模式、 ② envDir-环境变量的配置文件所在目录、 ③ root-环境变量配置文件的根文件名，默认为 .env

可以使用 process.cwd() 获取 envDir，该函数返回 node 的工作目录，一般为项目的根目录

调用 loadEnv 方法，vite 会：
① 到 envDir 目录下，找到 root 文件并解析
② 到 envDir 目录下，找到 ${root}.${mode} 文件并解析

import { defineConfig, loadEnv } from 'vite';export default defineConfig(({ command, mode }) => {const env = loadEnv(mode, process.cwd());console.log('env', env); // env { VITE_VARIATE: '1' }
});

在客户端：

Vite 在 import.meta.env 对象上暴露环境变量，这里有一些在所有情况下都能使用的内建变量：

MODE：{string} 应用运行的模式
BASE_URL：{string} 部署应用时的基本 URL，由 base 配置项决定
PROD：{boolean} 应用是否运行在生产环境
DEV：{boolean} 应用是否运行在开发环境
SSR：{boolean} 应用是否运行在 server 上

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

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

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

我们可以在 vite 配置文件中通过 envPrefix 配置项更改这个 [校验前缀]：

import { defineConfig } from 'vite';export default defineConfig({envPrefix: 'ENV_', // 将前缀更改为 `ENV_`
});

【Vite】环境变量的配置与使用相关推荐

Tomcat下载安装与环境变量的配置
注意:安装Tomcat之前,一定要先安装好JDK并正确配置jdk环境变量: 参考教程:JDK的安装与环境变量的配置 1.Tomcat下载 (1)百度搜索"Tomcat官网".&qu ...
怎么检测JDK环境变量是否配置正确
怎么检测JDK环境变量是否配置正确.. 点击开始--运行--输入cmd,点击确定. 在命令行窗口输入java 然后Enter.没有出现java既不是内部命令也不是外部命令.说明配置是正确的. 在命令 ...
java 运行环境变量,java运行环境和环境变量的配置
(本人为初学者,如果有错的地方,欢迎指正.) 1.首先到指定的网站下载安装包(http://www.oracle.com/technetwork/java/javase/downloads/jdk8- ...
java se环境变量设置_JavaSE中环境变量的配置
在说Java中环境变量配置之前,还是先说说JDK和JRE吧. JRE(Java Runtime Environment),即Java的运行环境.主要包括JVM(Java Virtual Machine ...
jdk安装和环境变量的配置
jdk安装和环境变量的配置 1.jdk 下载链接: http://www.oracle.com/technetwork/java/javase/downloads/index.html (下拉 ...
pycharm的安装与python解释器的安装，pip环境变量的配置要不然使用pip时报不是内部命令
介绍 pycharm不自带python带解释器,anaconda自带python解释器.因此装完pycharm,需要安装python解释器. pycharm的下载与安装 pycharm官网链接: ht ...
JAVA的JDK环境变量的配置JAVA_HOME;PATH;CLASSHOME
首先要在官网下载java 官网:http://www.oracle.com/technetwork/java/javase/downloads/ 到这个界面选择我接受记住该地址最好的办法新建记事 ...
java环境变量含义_Java环境变量的配置及意义
使得系统可以在任何路径下识别java命令,设为: %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin 注意"%JAVA_HOME%\"这个会被D:\java\j ...
python环境变量配置_Python环境变量的配置
1.右击我的电脑,点击属性,选择高级系统设置 2.选择环境变量 3.第一步:选择系统变量中:path:第二步:选择编辑 4.找到python的存储路径,并复制 5.将路径粘贴在此处 6.点击" ...
java环境变量设置的作用_JDK环境变量的配置及作用
从真正接触java到现在,差不多有一年时间了,配置JDK的环境变量也配置过无数次,但是对于这些配置的作用始终有点不太清楚,于是做了一些整理. 对于JDK要配置三个环境变量,分别是JAVA_HOME.p ...

【Vite】环境变量的配置与使用