Vite 本身不提供运行时读取配置的 API，但可通过 define 预定义全局常量或环境变量方式，将关键配置（如 port、base）安全注入客户端代码，实现配置复用。
vue/vite 本身不提供运行时读取 `vite.config.ts` 配置的 api，因为配置在构建/开发服务器启动时即被解析并丢弃，无法在浏览器中直接访问。但可通过 `define` 选项将配置值以编译期常量形式注入代码，或借助 `import.meta.env` 使用带 `vite_` 前缀的环境变量——二者均安全、类型友好且支持 hmr。
✅ 推荐方案：使用 define 注入配置常量（推荐用于非敏感、需强类型保障的配置）
define 会在构建时将键值对直接替换为字面量，零运行时开销，且支持 TypeScript 类型推导：
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
base: '/app/',
server: {
open: true,
port: 3000,
},
plugins: [react()],
define: {
// 自动注入，可在任意 .ts/.jsx 文件中使用
__VITE_BASE__: JSON.stringify('/app/'),
__VITE_PORT__: JSON.stringify(3000),
__VITE_OPEN__: JSON.stringify(true),
},
});
在组件或工具函数中直接使用：
// src/utils/api.ts
export const API_BASE_URL = `${window.location.protocol}//${window.location.hostname}:${__VITE_PORT__}/api`;
// src/App.tsx
console.log('Current dev port:', __VITE_PORT__); // TypeScript 会自动识别为 string 类型
⚠️ 注意：
define中的值必须是静态字符串/布尔/数字字面量（不能是process.env.VITE_PORT这类动态表达式），否则会触发构建警告或类型错误。若需从.env读取，请确保在配置顶层解析：
// vite.config.ts（更健壮写法）
const port = Number(process.env.VITE_PORT) || 3000;
export default defineConfig({
server: { port },
define: {
__VITE_PORT__: JSON.stringify(port),
},
});
✅ 替代方案：使用 import.meta.env（推荐用于可动态覆盖的配置）
所有以 VITE_ 开头的环境变量会自动暴露给客户端代码（仅限 VITE_*，其他会被过滤）：
# .env.development VITE_PORT=3000 VITE_API_URL=https://dev.api.example.com
// 任意源码中 console.log(import.meta.env.VITE_PORT); // "3000"（string 类型） console.log(import.meta.env.VITE_API_URL);
✅ 优势：支持多环境文件（.env.production）、HMR 热更新、无需手动 JSON.stringify；
❌ 局限：所有值均为字符串，需手动转换类型（如 Number(import.meta.env.VITE_PORT)）。
? 总结建议
- *优先用 `import.meta.env.VITE_`**：适合端口、API 地址等需按环境切换的配置，语义清晰、开箱即用；
-
选用
define：适合需严格类型保障、或需注入非字符串值（如布尔、对象结构）的场景； -
禁止在客户端读取
vite.config.ts：配置文件仅在 Node.js 环境执行，浏览器中不可访问； -
切勿暴露敏感配置：
VITE_*变量会打包进前端代码，严禁存放密钥、数据库凭证等。
通过以上任一方式，你都能在应用代码中可靠、可维护地复用 Vite 配置，告别硬编码与重复维护。
