如何在Vite构建的React项目中使用外部非打包配置文件

问题分析 #

你在public目录创建的config.js未生效，大概率是没有以全局变量的方式暴露配置，或是未在React入口脚本前引入该文件，导致组件无法读取到配置。

正确实现方案（推荐public目录方式） #

这种方式能保证配置文件不被打包进应用，且打包后可直接修改dist目录下的配置文件生效：

1. 创建全局配置文件
   在public目录下新建config.js，通过window对象暴露配置：

window.APP_CONFIG = {
  apiBaseUrl: "https://your-api-domain.com",
  requestTimeout: 5000,
  enableDebugMode: false
};

2. 在入口HTML中提前引入
   打开项目根目录的index.html，在React的入口脚本（通常是<script type="module" src="/src/main.jsx"></script>）之前引入config.js：

<head>
  <!-- 其他head内容 -->
  <script src="/config.js"></script>
</head>

3. 在React组件中读取配置
   直接通过全局变量访问配置：

function App() {
  const apiUrl = window.APP_CONFIG.apiBaseUrl;
  return <div>API地址：{apiUrl}</div>;
}

打包后，config.js会被直接复制到dist目录的根路径下，你可以随时修改这个文件，刷新页面就能生效，无需重新打包。

备选方案：环境变量结合外部配置文件 #

如果需要更灵活的配置管理（比如区分开发/生产环境），可以用这种方式，但注意此方案需要修改配置后重新打包：

1. 创建外部环境配置文件
   在项目根目录新建config.env（不要放到src或public目录）：

VITE_API_BASE_URL=https://your-api-domain.com
VITE_REQUEST_TIMEOUT=5000

2. 在Vite配置中读取并注入
   修改vite.config.js，读取外部配置文件并注入到全局：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import fs from 'fs';
import path from 'path';

// 读取外部env文件
const loadExternalEnv = () => {
  const envPath = path.resolve(process.cwd(), 'config.env');
  if (!fs.existsSync(envPath)) return {};
  return fs.readFileSync(envPath, 'utf-8').split('\n').reduce((envObj, line) => {
    const [key, value] = line.split('=').map(item => item.trim());
    if (key && value) envObj[key] = value;
    return envObj;
  }, {});
};

const externalEnv = loadExternalEnv();

export default defineConfig({
  plugins: [react()],
  define: {
    'process.env': { ...process.env, ...externalEnv }
  }
});

3. 在组件中使用配置

const timeout = process.env.VITE_REQUEST_TIMEOUT;

内容的提问来源于stack exchange，提问作者Yuvraj