vite vue3项目代理配置案例

在Vite（一个渐进式Web应用构建工具）配合Vue3开发项目时，如果需要对某些外部资源如API进行代理，以便在本地开发环境中请求它们，你可以通过`.viteconfig.js`文件来进行配置。下面是一个简单的代理配置示例：

import { defineConfig } from 'vite';
import axiosProxy from 'axios-proxy-agent';

export default defineConfig({
  // 其他配置...

  server: {
    port: 3000, // 你的服务器端口
  },

  // 添加代理设置
  proxy: [
    {
      target: 'https://api.example.com', // 要代理的实际URL
      changeOrigin: true,
      pathRewrite: { '^/api': '' }, // 将所有/api路径映射到target URL下
    },
    {
      // 如果你需要代理多个域名或路径模式，可以添加更多条目
      // 这里假设有一个图片服务
      target: 'http://images.example.com',
      prefix: '/images',
      changeOrigin: true,
    }
  ],

  // 使用axiosProxyAgent处理axios的请求
  build: {
    extend(config, ctx) {
      config.devServer.middleware = [
        ...config.devServer.middleware,
        axiosProxy('https://api.example.com')
      ];
    }
  }
});

在这个例子中，当你在Vite项目中访问`/api`或`/images`开头的路径时，实际会发送到`https://api.example.com`或`http://images.example.com`。