Vite 的构建时配置（如 port、base）默认无法在客户端代码中直接读取，但可通过环境变量 + define 插件机制安全地将配置值注入运行时，实现跨环境一致的配置访问。
vue/vite 项目中，vite 的构建时配置（如 `port`、`base`）默认无法在客户端代码中直接读取，但可通过环境变量 + `define` 插件机制安全地将配置值注入运行时，实现跨环境一致的配置访问。
在 Vite 中，vite.config.ts 是构建阶段执行的 Node.js 脚本，其配置对象（如 server.port）仅在开发服务器启动或构建过程中生效，并不会自动暴露给浏览器中的前端代码。因此，不能通过 import { config } from 'vite' 或类似方式直接访问——Vite 本身不提供运行时配置 API。
✅ 正确做法：使用 define 预定义全局常量
Vite 的 define 选项支持在编译时将值内联替换为字符串字面量，安全、零运行时开销，且支持类型推导（配合 TypeScript）：
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
server: {
open: true,
port: 3000,
},
define: {
// 将环境变量或硬编码值注入为全局常量
__VITE_PORT__: JSON.stringify(process.env.VITE_PORT ?? 3000),
__VITE_BASE__: JSON.stringify(process.env.VITE_BASE ?? '/'),
},
plugins: [react()],
});
随后即可在任意 .ts/.jsx 文件中直接使用：
// src/utils/api.ts
export const API_BASE_URL = `http://localhost:${__VITE_PORT__}/api`;
console.log('Dev server port:', __VITE_PORT__); // ✅ 编译后为 "3000"
⚠️ 注意事项：
- 环境变量必须以
VITE_开头才能被 Vite 自动加载（如.env中写VITE_PORT=3000）； -
define中的值在构建时静态替换，不可动态修改，适合配置类常量； - 避免将敏感信息（如密钥）通过
define暴露到前端； - 若需服务端与客户端共享配置，建议统一维护
src/env.d.ts声明类型，并在define中显式传入，提升类型安全性：
// src/env.d.ts declare const __VITE_PORT__: string; declare const __VITE_BASE__: string;
? 进阶建议：对多环境配置，可结合 mode 使用不同 .env.[mode] 文件，并在 define 中动态读取，确保开发、测试、生产环境配置隔离。总之，环境变量 + define 是 Vite 官方推荐、轻量且可靠的配置透传方案。
