Vite 本身不提供运行时直接读取 vite.config.ts 的 API，但可通过环境变量 + define 预定义全局常量的方式，安全、可靠地将配置值（如 port）注入客户端代码。
vue/vite 本身不提供运行时直接读取 vite.config.ts 的 api，但可通过环境变量 + define 预定义全局常量的方式，安全、可靠地将配置值（如 port）注入客户端代码。
在 Vite 中，构建时的配置（如 server.port）仅作用于开发服务器或构建流程，不会自动暴露给前端运行时代码。这是因为 Vite 配置是 Node.js 环境下执行的，而浏览器中无法直接访问该上下文。因此，若需在组件、工具函数或请求逻辑中动态获取端口号（例如拼接本地 API 地址），必须显式“桥接”该值。
✅ 推荐方案：使用 define + 环境变量（类型安全、零运行时开销）
-
声明环境变量（推荐统一管理）
在项目根目录创建.env文件：VITE_PORT=3000 VITE_BASE_URL=/app/
-
在
vite.config.ts中注入为编译期常量import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; export default defineConfig({ base: import.meta.env.VITE_BASE_URL || '/', plugins: [react()], server: { open: true, port: Number(import.meta.env.VITE_PORT) || 3000, }, define: { __VITE_PORT__: JSON.stringify(import.meta.env.VITE_PORT || 3000), __VITE_BASE_URL__: JSON.stringify(import.meta.env.VITE_BASE_URL || '/'), }, });⚠️ 注意：
import.meta.env在配置文件中可用（Vite 4.3+），无需额外process.env；若使用旧版，可改用process.env.VITE_PORT，但需确保变量以VITE_开头才能被 Vite 自动暴露。 -
在任意
.ts/.tsx文件中直接使用// utils/api.ts export const getApiBaseUrl = () => { // 类型推导为 string（TS 可识别） return `http://localhost:${__VITE_PORT__}/api`; }; console.log('Dev API endpoint:', getApiBaseUrl()); // http://localhost:3000/api
? 补充说明：
-
define中的键名（如__VITE_PORT__）会在构建时被静态替换，无运行时性能损耗； - 所有
VITE_*环境变量默认仅在客户端代码中可用（通过import.meta.env.VITE_*），但不能直接用于配置逻辑中的复杂表达式（如条件判断），此时define是更可控的选择； - 切勿将敏感配置（如密钥、内部地址）通过
define暴露到前端——它终将出现在打包产物中。
总结：不要尝试“读取 vite.config.ts”，而应遵循 Vite 的设计哲学——用环境变量声明意图，用 define 注入确定值。这是最简洁、可维护且符合工具链约定的方式。
