Vite 中配置环境变量方法及完整示例

在 Vite 项目中配置环境变量是非常常见且重要的操作，Vite 提供了一种简便的方法来管理环境变量。以下是详细的步骤和完整的示例：

1. 创建环境变量文件

Vite 使用 .env、.env.local、.env.[mode] 等文件来存储不同环境下的变量。例如：

.env: 默认的环境变量配置文件
.env.development: 开发环境变量配置文件
.env.production: 生产环境变量配置文件

在项目根目录下创建这些文件并添加相应的变量：

.env

plaintext 复制代码

VITE_API_BASE_URL=https://api.example.com

.env.development

plaintext 复制代码

VITE_API_BASE_URL=https://dev.api.example.com

.env.production

plaintext 复制代码

VITE_API_BASE_URL=https://api.example.com

注意：变量名必须以 VITE_ 开头才能被 Vite 识别并在客户端代码中使用。

2. 读取环境变量

在你的 JavaScript/TypeScript 文件中，可以使用 import.meta.env 来访问环境变量：

javascript 复制代码

// src/main.js
console.log(import.meta.env.VITE_API_BASE_URL);

3. 配置 Vite (可选)

如果你需要自定义 Vite 的配置，可以在 vite.config.js 中进行设置：

javascript 复制代码

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  // 根据环境变量选择不同的配置
  define: {
    'process.env.VITE_API_BASE_URL': process.env.VITE_API_BASE_URL,
  },
});

4. 完整示例

假设你有以下目录结构：

复制代码

my-vite-app/
├── .env
├── .env.development
├── .env.production
├── src/
│   └── main.js
└── vite.config.js

.env

plaintext 复制代码

VITE_API_BASE_URL=https://api.example.com

.env.development

plaintext 复制代码

VITE_API_BASE_URL=https://dev.api.example.com

.env.production

plaintext 复制代码

VITE_API_BASE_URL=https://api.example.com

src/main.js

javascript 复制代码

const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;
console.log('API Base URL:', apiBaseUrl);

vite.config.js

javascript 复制代码

import { defineConfig } from 'vite';

export default defineConfig({
  // 其他 Vite 配置
});

5. 启动项目

根据不同的模式启动项目：

bash 复制代码

# 开发环境
npm run dev

# 生产环境
npm run build
npm run preview

通过以上步骤，你可以在 Vite 项目中轻松地管理和使用环境变量。