环境变量与模式

2025-07-15 本文已影响0人 5cc9c8608284

认识环境变量

以最熟悉的 import.meta.env.BASE_URL 为例：

// router/index.js
const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: [
    // ...
  ]
})

该变量在：

开发环境中，默认值通常是 '/'
生产环境中，这个值可以根据 vite.config.js 文件中的 base 配置项进行设置

Vite 其他内置环境变量：

import.meta.env.MODE：获取当前应用运行的模式
import.meta.env.PROD：应用是否运行在生产环境
import.meta.env.DEV：应用是否运行在开发环境
import.meta.env.SSR：应用是否运行在 server 上

NODE_ENV和模式

代码运行有不同的环境：

开发环境
测试环境
生产环境

不同的环境，需要不同的配置来满足需求。

例如：

数据库连接

开发环境：通常连接到本地数据库或开发用的数据库服务器，这些数据库可能包含测试数据或模拟数据。
测试环境：连接到模拟真实运行状态的测试数据库，这些数据库中的数据结构和生产环境一致，但数据通常是匿名化或专为测试准备的。
生产环境：连接到包含真实用户数据的生产数据库，且通常具有高可用性和额外的安全配置。

API密钥和凭证

开发环境：可能使用具有限制权限的API密钥，这些密钥用于防止在开发过程中对真实数据造成影响。
测试环境：使用专为测试设计的密钥，这些密钥可能允许访问更多的测试接口或模拟数据。
生产环境：使用具有完整访问权限的API密钥，这些密钥通常需要严格保密，以保护应用和用户数据的安全。

错误处理

开发环境：错误可能直接显示详细的堆栈信息，便于开发者快速定位问题。
测试环境：错误处理可能包括将错误详细记录到日志文件，同时显示给定的错误消息以模拟生产环境的行为。
生产环境：错误处理旨在不泄露任何敏感信息，通常只提供一个用户友好的错误消息和一个错误代码，同时将详细信息记录在服务器的安全日志中。

如何指定代码运行的环境呢？

一般可以通过 NODE_ENV 这个环境变量，该变量可以指定代码的运行环境，比如 development、production 或 test

通过指定运行环境，从而能够：

控制代码行为：开发者可以根据 NODE_ENV 的值在代码中做一些判断，从而执行不同的逻辑

影响构建工具和库：很多工具和库也会根据 NODE_ENV 不同的值有不同的行为

if (process.env.NODE_ENV === 'production') {
  // 生产环境的特定逻辑
}

module.exports = {
  mode: 'development',
  // 其他配置...
};

那 Vite 中的模式又是什么呢？

一句话总结：在 Vite 中，模式是一个可以在启动时设置的属性，用来指导 Vite 如何加载 .env 文件。

.env 的文件用来存放环境变量，之后在客户端源码中就可以通过 import.meta.env 来访问对应的值。

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

例如：

.env

VITE_SOME_KEY=123
DB_PASSWORD=foobar

这里只有 VITE_SOME_KEY 会暴露给客户端源码：

console.log(import.meta.env.VITE_SOME_KEY) // "123"
console.log(import.meta.env.DB_PASSWORD) // undefined

.env 文件还可以有不同的类型：

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

这里的 mode 指代的就是 Vite 里面的模式。

例如，我们可以在 .env.development 和 .env.production 文件中定义不同的环境变量，在使用 Vite 启动应用的时候可以指定对应的模式加载对应的 .env 文件。

my-vite-project/
├── .env               # 默认的环境变量
├── .env.development   # 开发环境的环境变量
├── .env.production    # 生产环境的环境变量
├── src/
│   └── main.js
└── vite.config.js

.env.development

VITE_API_URL=https://dev.api.example.com
DEBUG=true

.env.production

VITE_API_URL=https://api.example.com
DEBUG=false

之后使用 Vite 启动应用的时候，就可以指定特定的模式，从而加载不同的 .env 文件

# 开发环境
vite --mode development

# 生产环境构建
vite build --mode production

思考🤔：为什么有了 NODE_DEV 还需要 mode 模式？

答案：NODE_DEV 是在 Node.js 环境中最早被支持的一个环境变量，广泛的被用于各大工具和库。而模式是特定于某个构建工具，主要就是用于更加细粒度的场景控制。也就是说，使用 mode 可以在不影响 NODE_DEV 的前提下具备更高的灵活性。

环境变量与模式

猜你喜欢

热点阅读