如何在Vite+React项目中无插件实现构建阶段调用服务端API？

构建阶段完成API调用是否可行？ #

完全可行。Vite的构建过程运行在Node.js环境中，你可以直接在构建流程里编写代码调用API，把返回的数据打包到前端项目中，浏览器端只会加载静态数据，不会暴露原始API请求。

不依赖外部插件的实现步骤与条件 #

实现步骤 #

1. 修改Vite配置文件：在项目根目录的vite.config.js中，利用Vite的构建钩子（比如buildStart）执行API调用逻辑。
   示例代码：

   import { defineConfig } from 'vite';
   import react from '@vitejs/plugin-react';
   import fs from 'fs/promises';
   import axios from 'axios'; // 也可使用Node原生http/https模块替代
   
   export default defineConfig({
     plugins: [react()],
     async buildStart() {
       // 调用目标API
       const response = await axios.get('https://your-api-url.com/public-data');
       // 将数据写入静态文件，供React组件直接导入
       await fs.writeFile(
         './src/api-data.js',
         `export const apiData = ${JSON.stringify(response.data)};`
       );
       console.log('API数据已写入静态文件');
     },
   });
   

2. 在React组件中使用数据：直接导入生成的静态文件，无需在浏览器端发起请求：

   import { apiData } from './api-data';
   
   function App() {
     return <div>{apiData.content}</div>;
   }
   

3. 构建项目：执行npm run build时，Vite会自动触发钩子中的API调用，把数据打包到最终产物里。

必备条件 #

• API请求不需要用户上下文：构建阶段是一次性执行的，无法获取浏览器端的用户token、动态请求参数等信息，仅适用于获取通用静态数据（比如公共配置、首页固定内容）。
• API返回的数据是静态或通用的：如果数据需要随用户、时间动态变化，构建阶段调用的方案不适用。
• 本地有Node.js环境：Vite本身依赖Node.js，该条件默认满足。

少量API场景下的方案选择 #

分两种情况判断：

1. 无需用户上下文的API：直接用上述构建阶段调用方案，无需搭建额外服务，成本最低，且能完全避免浏览器端暴露API请求。
2. 需要用户上下文的API：
   • 开发阶段可使用Vite的server.proxy配置做代理，转发前端请求到目标API，既避免跨域又隐藏真实API地址：

     export default defineConfig({
       server: {
         proxy: {
           '/api': {
             target: 'https://your-api-url.com',
             changeOrigin: true,
             rewrite: (path) => path.replace(/^\/api/, ''),
           },
         },
       },
     });
     

   • 生产环境若只是少量API，优先用静态托管平台的代理/重写规则（比如Netlify的_redirects、Vercel的vercel.json），无需自行搭建Node+Express服务；如果没有合适的托管平台，再考虑搭建轻量Express服务，仅做API转发逻辑，代码量小、维护成本低。

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