Skip to content

环境变量

Art Design Pro X 使用 Vite 的环境变量机制管理开发端口、部署路径、接口地址、菜单来源、存储隔离和版本更新策略。环境变量属于工程配置,不应该承担业务数据或密钥管理职责。

环境文件

项目根目录包含三类环境文件:

文件加载时机适合配置
.env所有模式版本、端口、基础路径、菜单来源、存储命名空间
.env.developmentpnpm dev开发代理、开发日志开关
.env.productionpnpm build生产 API、部署路径、控制台移除

同名变量以当前模式文件为准。例如 .env.development 中的 VITE_API_URL 会覆盖 .env 中的值。

修改后需要重启

Vite 在开发服务启动时读取环境文件。修改 .env* 后,应停止并重新执行 pnpm dev

核心变量

应用与部署

ini
VITE_VERSION = 1.0.0
VITE_PORT = 3000
VITE_BASE_URL = /
  • VITE_VERSION:应用版本,参与版本化存储和发布识别。
  • VITE_PORT:本地开发服务器端口。
  • VITE_BASE_URL:应用部署基础路径。部署到 /admin/ 时应设置为 /admin/,并同步配置 Web 服务器回退规则。

接口与代理

ini
VITE_API_URL = /
VITE_WITH_CREDENTIALS = false

开发环境推荐继续使用相对地址,并通过代理连接后端:

ini
# .env.development
VITE_API_URL = /
VITE_API_PROXY_URL = http://localhost:13000

浏览器请求 /api/.../uploads/...,Vite 将请求转发至 VITE_API_PROXY_URL。生产环境建议由 Nginx 或网关提供同源转发,减少跨域配置和 Cookie 策略带来的复杂度。

只有明确采用跨域 Cookie 会话时才启用:

ini
VITE_WITH_CREDENTIALS = true

项目默认使用 Bearer Token,因此通常保持 false

菜单来源

ini
VITE_MENU_SOURCE = local

可选值:

行为适用场景
local使用 src/router/modules,按当前用户角色过滤前端维护菜单、快速交付
remote请求 /api/v1/user/menus 并注册动态路由后端统一维护菜单和租户权限

切换到 remote 前,应先完成菜单接口并通过路由与权限中描述的结构校验。

本地数据延迟

ini
VITE_MOCK_DELAY = 60

该值控制 src/mock 的可选延迟,单位为毫秒。设为 0 可以关闭。它只用于模拟异步页面体验,不代表真实网络性能,也不应出现在生产性能指标中。

存储命名空间

ini
VITE_STORAGE_NAMESPACE = sys

项目持久化键采用以下格式:

text
{namespace}-v{version}-{storeId}

客户项目应将默认值改成独立、稳定的命名空间,例如:

ini
VITE_STORAGE_NAMESPACE = acme-admin

同一域名下部署多个系统时,独立命名空间可以避免用户偏好、Token 和表格配置互相覆盖。上线后不要频繁修改,否则浏览器会把它识别成一套新的本地数据。

路由调试与锁屏

ini
VITE_OPEN_ROUTE_INFO = false
VITE_LOCK_ENCRYPT_KEY = replace-with-project-specific-value
  • VITE_OPEN_ROUTE_INFO:控制路由调试信息,生产环境建议关闭。
  • VITE_LOCK_ENCRYPT_KEY:用于前端锁屏数据处理,应替换为项目独立值。

锁屏密钥位于浏览器构建产物中,只能降低明文暴露,不是服务端安全密钥,也不能替代登录鉴权。

版本更新配置

ini
VITE_BUILD_ID =
VITE_VERSION_UPDATE_ENABLED = false
VITE_VERSION_FORCE_UPDATE = false
VITE_VERSION_UPDATE_MESSAGE =
VITE_VERSION_CHECK_INTERVAL = 300000
VITE_VERSION_SNOOZE_DURATION = 1800000

推荐在 CI 中为 VITE_BUILD_ID 注入提交 SHA 或流水线编号。未显式提供时,构建配置会使用版本号与构建时间生成标识。

启用版本提示时,应区分普通更新和强制更新:

  • 普通更新允许用户稍后处理,适合非阻断式界面改进。
  • 强制更新用于协议变化、关键安全修复或旧资源无法继续工作的情况。
  • 检查间隔不宜过短,避免无意义请求和频繁弹窗。

TypeScript 类型声明

环境变量类型位于 src/env.d.ts。新增变量后应同步声明,避免在业务代码中到处进行字符串断言:

ts
interface ImportMetaEnv {
  readonly VITE_API_URL?: string
  readonly VITE_MENU_SOURCE?: 'local' | 'remote'
  readonly VITE_STORAGE_NAMESPACE?: string
}

读取时统一使用:

ts
const apiUrl = import.meta.env.VITE_API_URL || '/'

布尔值和数字在 import.meta.env 中仍然是字符串,需要在配置层完成解析和默认值处理。

安全边界

所有以 VITE_ 开头的变量都会进入浏览器构建产物,用户可以在 JavaScript、Source Map 或网络请求中看到它们。因此以下内容不能写入环境文件:

  • 数据库密码、对象存储 Secret
  • JWT 签名密钥
  • 第三方服务私钥
  • 服务端管理令牌
  • 任何依赖“用户看不到”才能安全的信息

真正的密钥必须保存在后端或部署平台的服务端环境中。

推荐配置流程

  1. 修改 VITE_STORAGE_NAMESPACE,确保客户项目存储隔离。
  2. 确认 VITE_BASE_URL 与实际部署路径一致。
  3. 开发环境配置 VITE_API_PROXY_URL
  4. 按菜单管理方式选择 localremote
  5. 在 CI 中注入 VITE_BUILD_ID
  6. 执行 pnpm build,检查构建和路由基础路径。

接口联调的完整说明见接口接入,生产发布检查见构建部署

根据 MIT 许可证发布