如何在 Vite.js 中使用代理开发 API

Vite 是一个基于浏览器构建速度最快的前端开发服务器，它提供了极快的热更新和高性能的开发体验。在进行 API 开发时，我们经常需要模拟或代理后端 API 以供前端测试或调试使用。本文将介绍如何在 Vite.js 中配置代理来实现这一目标。

理解代理（Proxy）

代理是一种技术，允许客户端应用与本地服务进行通信，就像它们直接与远程服务器通信一样。在 Vite.js 中，通过配置 vite.config.js 文件中的代理选项，可以轻松地实现这一功能。

配置 Vite.js 的代理

要在 Vite.js 中配置代理，首先需要创建或编辑你的项目根目录下的 vite.config.js 文件。如果你的项目还没有这个文件，可以通过运行以下命令自动生成：

npx vite config

接下来，修改 vite.config.js 文件，在其中添加代理配置。以下是基本的代理配置示例：

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    // 启用代理功能
    proxy: {
      '/api': {
        // 目标代理 URL
        target: 'http://localhost:3000',
        // 转发路径前缀
        changeOrigin: true,
        // 重写请求路径
        pathRewrite: {
          '^/api': '',
        },
      },
    },
  },
});

在这个配置中：

• /api 是前端应用中用于访问 API 的统一前缀。
• target: 'http://localhost:3000' 指定了后端 API 的实际地址。
• changeOrigin: true 表示 Vite 应该改变请求头中的 Host 字段，使其指向正确的后端服务器。
• pathRewrite: {'^/api': ''} 用于重写请求路径，去掉 /api 前缀，使前端请求看起来像是直接指向了后端 API。

示例代码：模拟 API 交互

假设我们有一个简单的 API 接口，如下所示：

const apiData = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
];

// 模拟 API 方法
function fetchItems() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(apiData);
    }, 500);
  });
}

// 模拟单个 item 的获取
function getItem(id) {
  return new Promise((resolve) => {
    setTimeout(() => {
      const foundItem = apiData.find((item) => item.id === parseInt(id));
      resolve(foundItem || null);
    }, 500);
  });
}

前端代码中，我们可以这样使用这些模拟的 API 方法：

import { fetchItems, getItem } from './api.js';

document.addEventListener('DOMContentLoaded', async () => {
  const items = await fetchItems();
  console.log('All items:', items);

  const itemId = 1;
  const item = await getItem(itemId);
  console.log(`Item with ID ${itemId}:`, item);
});

总结

通过上述步骤，你可以在 Vite.js 中配置代理来模拟或访问后端 API。这不仅极大地提高了开发效率，还使得在没有真实后端服务的情况下也能进行有效的前端测试和调试。记得根据自己的项目需求调整代理配置，例如修改代理目标 URL、增加多个代理规则等。