什么是环境变量
根据当前的代码环境产生值的变化的变量就叫做环境变量。比如，在生产环境和开发环境将BASE_URL设置成不同的值，用来请求不同的环境的接口。
环境变量可以全局访问到。在webapck中，我们也许看到过这样的代码，process.env.NODE_ENV就是一个环境变量。
// webpack.config.js module.exports = { mode: process.env.NODE_ENV === 'production' ? 'production' : 'development' }
process.env是Nodejs提供的一个API，其返回一个对象，包含了当前Shell的所有环境变量。比如，process.env.HOME返回用户的主目录。
vite中如何使用环境变量
环境变量与process.env
首先，我们要明确的是，通常我们使用环境变量，是基于不同环境实现不同逻辑的。比如，在生产环境和开发环境将BASE_URL设置成不同的值，用来请求不同的环境的接口，这一行为，都是在浏览器端进行的。
vue2中，webpack帮我们做了处理，使浏览器可以直接识别node的process.env变量，从而实现了浏览器识别环境变量的功能。
vite中，我们的代码在浏览器环境是无法识别process.env变量的（这意味着，vite中识别环境变量的方式与webpack中不同），但vite.config.js中可以识别，看下面的例子：
我们在main.js中打印process.env，观察浏览器中的提示信息
console.log(' process.env: ', process.env);
然后再vite.config.js中也打印process.env
import { defineConfig } from "vite"; import viteBaseConfig from "./vite.base.config"; import viteDevConfig from "./vite.dev.config"; import viteProdConfig from "./vite.prod.config"; const envResolver = { build: () => { console.log("生产模式"); return Object.assign({}, viteBaseConfig, viteProdConfig); }, serve: () => { console.log("开发模式"); console.log("process.env: ", process.env); return Object.assign({}, viteBaseConfig, viteDevConfig); }, }; export default defineConfig(({ command, mode, ssrBuild }) => { return envResolver[command](); });
vite.config.js运行在node环境中，自然能够识别node的process
那么，vite中如何识别环境变量呢？
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 上。
我们在main.js中打印一下看看
console.log(' import.meta.env.MODE: ', import.meta.env.MODE); console.log(' import.meta.env.BASE_URL: ', import.meta.env.BASE_URL); console.log(' import.meta.env.PROD: ', import.meta.env.PROD); console.log(' import.meta.env.DEV: ', import.meta.env.DEV); console.log(' import.meta.env.SSR: ', import.meta.env.SSR);
注：这些变量在node环境中，即vite.config.js中无法访问
那么，我们如何根据不同的开发环境自定义一些环境变量呢？
vite中自定义环境变量
Vite内置了dotenv这个第三方库， dotenv会自动读取.env文件， dotenv 从你的 环境目录 中的下列文件加载额外的环境变量：
.env # 所有情况下都会加载 .env.[mode] # 只在指定模式下加载
默认情况下
- npm run dev 会加载 .env 和 .env.development 内的配置
- npm run build 会加载 .env 和 .env.production 内的配置
- mode 可以通过命令行 --mode 选项来重写。
加载的环境变量也会通过 import.meta.env 以字符串形式暴露给客户端源码。
为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。
我们验证下：
我们在项目的根目录下，创建.env文件，写入测试内容；同时创建.env.development、.env.development文件
HELLO = "小伙子，我是base数据" VITE_HELLO = "小伙子，我是base数据"
.env.development
HI = "小伙子，我是development数据" VITE_HI = "小伙子，我是development数据"
.env.development
MD = "小伙子，我是production数据" VITE_MD = "小伙子，我是production数据"
然后再main.js中打印一下
console.log(' HI: ', import.meta.env.HI); console.log(' VITE_HI: ', import.meta.env.VITE_HI); console.log(' HELLO: ', import.meta.env.HELLO); console.log(' VITE_HELLO: ', import.meta.env.VITE_HELLO); console.log(' MD: ', import.meta.env.MD); console.log(' VITE_MD: ', import.meta.env.VITE_MD);
运行 npm run dev 命令，打开浏览器试试。
可以看到，以VITE_开头的环境变量都被识别出来了。
vite环境变量配置进阶
加载自定义的.env文件
基于vite的mode模式，项目中，我们默认可以加载开发模式（development）和生产模式（production）对应的.env文件。
假如，我们自定义一个test环境，想加载.env.test内的环境变量，要怎么做吗?
1.显示的指定mode 模式
参考vite 的modehttps://vitejs.cn/vite3-cn/config/shared-options.html#base
为了方便，我们直接在package.json中配置命令 "test": "vite --mode test",
"scripts": { "test": "vite --mode test", "dev": "vite", "build": "vite build" },
2.根目录创建.env.test文件
VITE_HI = "1111111111111111111111111111111111"
我们在main.js打印这个环境变量 console.log(' VITE_HI: ', import.meta.env.VITE_HI);
然后，运行npm run test ，可以看见，环境变量被正确打印了。
Vite内置了dotenv这个第三方库， dotenv会自动读取.env文件， dotenv 从你的 环境目录 中的下列文件加载额外的环境变量：
.env # 所有情况下都会加载 .env.[mode] # 只在指定模式下加载
更改.env的默认地址
我们现在的.env文件都是建立在根目录的，如果.env.XX的文件太多，会显得我们的项目目录很乱，我们能将.env放在一个统一的文件夹内吗？
可以通过envDir配置来改变！参考：Vite
envDir用于加载 .env 文件的目录。可以是一个绝对路径，也可以是相对于项目根的路径。
- 类型： string
- 默认： root
比如，我们在vite.config.js中这样配置
import { defineConfig } from "vite"; export default defineConfig( { envDir:"env" });
然后，所有的.env.xxx文件就可以放在项目根目录的env文件夹下了。
更改环境变量的VITE_前缀
如果你觉得VITE_前缀不够骚，想更换这个前缀，改怎么做呢？
使用envPrefix配置来改变！参考：Vite
以 envPrefix 开头的环境变量会通过 import.meta.env 暴露在你的客户端源码中。
- 类型： string | string[]
- 默认： VITE_
安全注意事项
envPrefix 不应被设置为空字符串 ''，这将暴露你所有的环境变量，导致敏感信息的意外泄漏。 检测到配置为 '' 时 Vite 将会抛出错误.
vite加载环境变量源码分析
vite环境变量加载机制
基于dotenv的原理，.env内的环境变量在node环境中应该是能被全局识别的。我们在项目中建立个.env文件，配置好环境变量
HELLO = "小伙子，你很行啊"
我们在vite.config.js中进行打印。
import { defineConfig } from "vite"; export default defineConfig(({ command, mode, ssrBuild }) => { console.log("process.env: ", process.env.HELLO); return { //....一些vite配置 }; });
奇怪的是，process.env.HELLO并没有被打印（注意：现在是node环境），这是为什么？
通过前几节的示例，我们可以知道，envDir 选项会影响加载.env文件的位置，因此，Vite 默认是不加载 .env 文件的，因为这些文件需要在执行完 Vite 配置后才能确定加载哪一个。
源码：
