如何在运行时访问 Vite 配置项（如端口号）-js教程-PHP中文网

如何在运行时访问 Vite 配置项（如端口号）

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 自动暴露。

Vite 6.4.5
Vite 6.4.5 历史版本 npm 官方下载，适合旧项目依赖固定、前端开发和生产环境构建。

下载

在任意 .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 暴露到前端——它终将出现在打包产物中。