http-proxy-middlewarevue3中怎么使用

在Vue3中使用http-proxy-middleware，你需要先安装http-proxy-middleware依赖包。可以通过以下命令进行安装：

npm install http-proxy-middleware --save

然后在Vue项目中的src目录下创建一个setupProxy.js文件，用于配置代理。在该文件中，你可以使用createProxyMiddleware函数来创建一个代理中间件。

// src/setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://example.com', // 设置代理目标地址
      changeOrigin: true, // 将请求头中的host设置为target
      secure: false, // 如果代理目标是https，需要将secure设置为false
    })
  );
};

接下来，在Vue项目的main.js文件中引入setupProxy.js，以使其在Vue应用启动时生效。

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import setupProxy from './setupProxy';

const app = createApp(App);

setupProxy(app);

app.mount('#app');

现在，所有以/api开头的请求都会被代理到http://example.com。例如，发送一个请求/api/users，实际上会被代理到http://example.com/api/users。

请注意，以上示例是基于Vue CLI创建的Vue项目，如果你是手动搭建的Vue项目，可能需要做一些额外的配置。具体可以参考http-proxy-middleware的文档