环境变量

概述

项目通过 .env、.env.development、.env.production 文件管理环境变量。所有变量以 VITE_ 前缀命名，可在客户端代码中通过 import.meta.env 访问。

变量列表

变量	说明	开发环境	生产环境
`VITE_API_URL`	接口基础地址	指向当前源（使用本地 Mock）	填写真实后端地址
`VITE_TOKEN_KEY`	本地存储 Token 的键名	`admin_token`	`admin_token`
`VITE_NEW_TOKEN_KEY`	本地存储续签 Token 的键名	`New-Access-Token`	`New-Access-Token`
`VITE_WITH_CREDENTIALS`	跨域请求是否携带 Cookie	`false`	根据部署需求设置
`VITE_BASE_URL`	应用基础路径	`/`	`/` 或子路径

开发环境

bash

# .env.development
VITE_API_URL=
VITE_TOKEN_KEY=admin_token
VITE_NEW_TOKEN_KEY=New-Access-Token
VITE_WITH_CREDENTIALS=false

本地 Mock

开发环境下 VITE_API_URL 留空，请求会自动走 public/api/ 下的静态 JSON Mock 数据，开箱即用无需后端。

生产环境

bash

# .env.production
VITE_API_URL=https://api.example.com
VITE_TOKEN_KEY=admin_token
VITE_NEW_TOKEN_KEY=New-Access-Token
VITE_WITH_CREDENTIALS=true

安全提示

生产环境务必将 VITE_API_URL 指向真实后端服务。Token 默认存储于 localStorage，对 XSS 不设防。安全要求更高时，建议改由后端下发 HttpOnly + Secure + SameSite 的 Cookie，并开启 VITE_WITH_CREDENTIALS 让请求自动携带 Cookie。

在代码中使用

typescript

// 获取接口地址
const apiUrl = import.meta.env.VITE_API_URL

// 获取 Token 键名
const tokenKey = import.meta.env.VITE_TOKEN_KEY

// 判断是否携带 Cookie
const withCredentials = import.meta.env.VITE_WITH_CREDENTIALS === 'true'

开发与生产环境区别

特性	开发环境	生产环境
数据来源	本地 JSON Mock（`public/api/`）	真实后端接口
CRUD 持久化	仅前端生效，刷新后还原	后端持久化
Token 存储	`localStorage`	`localStorage`（或 Cookie）
跨域 Cookie	不携带	按需开启
热更新	Vite HMR	不适用
Source Map	完整	不生成

环境变量 ​

概述 ​

变量列表 ​

开发环境 ​

生产环境 ​

在代码中使用 ​

开发与生产环境区别 ​