webpack配置代理服务proxy

最新推荐文章于 2025-07-06 10:15:00 发布

原创最新推荐文章于 2025-07-06 10:15:00 发布 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

apache不带扩展名访问同时被 2 个专栏收录

2 篇文章

订阅专栏

webpack代理配置

1 篇文章

订阅专栏

本文介绍如何使用Webpack的proxy代理功能来模拟本地接口数据，通过配置devServer和proxy属性，实现本地开发环境中对mock数据的请求，包括使用apache作为本地服务器的具体步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景

在使用webpack搭建一个项目的时候，本地开发mock接口数据是不可避免的，
mock的方式有多种，比如mock.js、webpack的proxy代理。
本文主要是使用proxy而且代理的是本地的数据。

开始

我们都知道webpack在开发环境有devServer的配置

const proxy = {
  '/test/*': {
    target: 'http://yapi.afpai.com/mock/768', // 源地址
    changeOrigin: true, // 改变源
    ws: true,
    pathRewrite: {
      '^/api': ''
    }
  },
  // 起一个本地服务且有study目录
  '/study/*': {
    target: 'http://localhost:70',
    changeOrigin: true, // 改变源
  }
};
devServer: {
    contentBase: './src',
    hot: true,
    proxy: proxy
 },
 注意target的值需要加上协议（被坑过）

一般公司会有接口文档平台，在上面可以mock接口数据，但是假如我们自己玩呢，同理我们可不可以代理本地的数据呢。
答案当然可以，我们只需要起一个本地服务（这里我用的是apache），确保指定目录下有接口路径对应的文件就好了。这里我的是.php文件。