## 引言

在前端开发中，我们经常需要使用到环境变量，比如一些 API 的 URL、端口号等信息。为了方便地管理这些信息，我们可以使用 Vite 来配置环境变量。Vite 是一个非常棒的前端构建工具，它可以帮助我们快速构建和开发现代前端应用程序。

## 配置环境变量

在 Vite 中，我们可以通过 `.env` 文件来配置环境变量。`.env` 文件是一个纯文本文件，它存储着环境变量的键值对。我们可以通过 `process.env` 对象来访问这些环境变量。

.env 文件

VITE_APP_URL=https://example.com
VITE_APP_PORT=3000

在 JavaScript 中，我们可以通过以下方式来访问环境变量：

console.log(process.env.VITE_APP_URL) // https://example.com
console.log(process.env.VITE_APP_PORT) // 3000

## 多工程配置

在一些项目中，我们可能需要同时开发多个工程。比如，我们可能需要开发一个普通版和一个完全版。为了避免同时维护多个仓库这种繁琐的操作，我们可以在同一个代码仓库中维护多个工程。

.
├── package.json
├── vite.config.js
├── src
│ ├── common
│ │ ├── App.vue
│ │ └── index.js
│ ├── premium
│ │ ├── App.vue
│ │ └── index.js

在上面的例子中，我们有两个工程：`common` 和 `premium`。它们共享相同的代码仓库，但它们有各自的 `App.vue` 和 `index.js` 文件。

我们可以通过以下方式来为这两个工程配置环境变量：

.env 文件

VITE_APP_URL_COMMON=https://example.com/common
VITE_APP_PORT_COMMON=3001
VITE_APP_URL_PREMIUM=https://example.com/premium
VITE_APP_PORT_PREMIUM=3002

在 JavaScript 中，我们可以通过以下方式来访问这两个工程的环境变量：

// common 工程
console.log(process.env.VITE_APP_URL_COMMON) // https://example.com/common
console.log(process.env.VITE_APP_PORT_COMMON) // 3001

// premium 工程
console.log(process.env.VITE_APP_URL_PREMIUM) // https://example.com/premium
console.log(process.env.VITE_APP_PORT_PREMIUM) // 3002

## 多环境配置

在一些项目中，我们可能需要在不同的环境中开发和部署我们的应用程序。比如，我们可能需要一个开发环境、一个测试环境和一个生产环境。

.env.development

VITE_APP_URL=http://localhost:3000
VITE_APP_PORT=3000

.env.test

VITE_APP_URL=http://localhost:3001
VITE_APP_PORT=3001

.env.production

VITE_APP_URL=https://example.com
VITE_APP_PORT=80

在 JavaScript 中，我们可以通过以下方式来访问这些环境的环境变量：

// 开发环境
console.log(process.env.VITE_APP_URL) // http://localhost:3000
console.log(process.env.VITE_APP_PORT) // 3000

// 测试环境
console.log(process.env.VITE_APP_URL) // http://localhost:3001
console.log(process.env.VITE_APP_PORT) // 3001

// 生产环境
console.log(process.env.VITE_APP_URL) // https://example.com
console.log(process.env.VITE_APP_PORT) // 80

## 总结

Vite 是一个非常棒的前端构建工具，它可以帮助我们快速构建和开发现代前端应用程序。通过使用 Vite 来配置环境变量，我们可以让我们的多工程、多环境项目开发更加轻松。