Electron-Vite-Vue 项目环境变量配置指南

环境变量配置常见问题解析

在基于 Electron-Vite-Vue 技术栈的项目开发中，开发者经常会遇到环境变量无法正确读取的问题。本文将深入探讨环境变量的正确配置方式，帮助开发者避免常见陷阱。

Vite 环境变量机制

Vite 作为现代前端构建工具，对环境变量的处理有其特殊机制。与传统的 Webpack 不同，Vite 默认只暴露带有特定前缀的环境变量到客户端代码中。

必须使用 VITE_ 前缀

在 Vite 项目中，只有以 VITE_ 开头的环境变量才会被自动注入到客户端代码中。这是 Vite 的安全机制，防止意外泄露敏感信息。

例如，在 .env 文件中：

# 正确的写法 - 可以被客户端访问
VITE_API_URL=https://api.example.com

# 错误的写法 - 不会被客户端访问
API_URL=https://api.example.com

多环境配置策略

Vite 支持基于不同环境加载不同的配置文件，这是现代前端工程的常见实践：

1. .env - 所有环境共享的默认配置
2. .env.development - 仅开发环境使用
3. .env.production - 仅生产环境使用
4. .env.local - 本地覆盖配置（通常加入.gitignore）

访问环境变量的正确方式

在 Vue 组件或任何客户端代码中，应通过 import.meta.env 对象访问环境变量：

const apiUrl = import.meta.env.VITE_API_URL

常见问题排查

如果遇到环境变量无法读取的情况，请检查：

1. 变量名是否以 VITE_ 开头
2. 配置文件是否放置在项目根目录
3. 是否在正确的环境模式下运行（开发/生产）
4. 配置文件是否有语法错误（每行应为 KEY=VALUE 格式）

高级配置技巧

对于需要区分 Electron 主进程和渲染进程的环境变量，可以考虑：

1. 在主进程中使用 Node.js 的 process.env
2. 通过预加载脚本将特定变量安全地传递给渲染进程
3. 使用 Vite 的 define 配置注入编译时常量

总结

正确配置环境变量是 Electron-Vite-Vue 项目开发的基础。理解 Vite 的环境变量机制，遵循 VITE_ 前缀规范，合理组织多环境配置文件，可以显著提高项目的可维护性和安全性。