526互联

vite中环境变量的使用与配置

发布时间 2023-11-17 17:35:05作者: 柯基与佩奇

什么是环境变量

根据当前的代码环境变化的变量就叫做环境变量。比如，在生产环境和开发环境将 BASE_URL 设置成不同的值，用来请求不同的环境的接口。
环境变量一般可以在全局访问到。在 webapck 中，也许看到过这样的代码

// webpack.config.js
module.exports = {
  mode: process.env.NODE_ENV === "production" ? "production" : "development",
};

process.env.NODE_ENV 就是一个环境变量。
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 运行在 node 环境中，因此，可以识别 process.env 变量

看下面的例子：
在 main.js 中打印 process.env，浏览器不认识 process.env，会报错

console.log(" process.env: ", process.env);

vite.config.js 运行在 node 环境中，可以打印出 process.env

那么，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);

注：这些变量在运行在环境中，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 文件，写入测试内容；

HELLO = "小伙子，是base数据"
VITE_HELLO = "小伙子，是base数据"

创建 .env.development 文件，写入测试内容；

HI = "小伙子，是development数据"
VITE_HI = "小伙子，是development数据"

创建 .env.production 文件，写入测试内容；

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 命令，，观察浏览器打印结果

由于执行的是 run dev，所以 mode 的值是 development，因此 .env 和 .env.development 中以 VITE_ 为前缀的变量都会被识别

vite 环境变量配置进阶

加载自定义的.env 文件

基于 vite 的设计模式，项目中默认可以加载开发模式（development）和生产模式（production）对应的.env 文件。
假如，自定义一个 test 环境，想加载.env.test 内的环境变量，要怎么做吗?

  1. 显示的指定 mode 模式

参考 vite 的 mode共享配置 | Vite 官方中文文档
为了方便，直接在 package.json 中配置命令 "test": "vite --mode test",

"scripts": {
    "test": "vite --mode test",
    "dev": "vite",
    "build": "vite build"
},
  1. 根目录创建.env.test 文件
VITE_HI = "1111111111111111111111111111111111"

main.js 中打印这个环境变量

console.log(" VITE_HI: ", import.meta.env.VITE_HI);

运行 npm run test 命令 ，然后观察浏览器控制台结果。

可以看见，此时，自定义 test 环境下的环境变量被打印了。

更改.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 加载环境变量的特殊处理

node 环境中具有 process.env 这个全局变量。基于 dotenv 的加载原理，.env 内设置的环境变量在 vite.config.js 中理论上是可以打印出来的。
在项目中建立个.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 配置后才能确定加载哪一个。