webpack配置代理服务proxy

白昼怎懂夜的黑 提交于 2019-11-27 12:42:09

背景

在使用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文件。

缀述

apache–文件不带扩展名访问

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!