在 Vue3 项目中使用代理有两种方式:

使用 Vue CLI 的 devServer.proxy 配置

vue.config.js 中添加如下代码:

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

此配置将会把所有以 /api 开头的请求代理到 http://api.example.com

使用 http-proxy-middleware 进行配置

main.js 中添加如下代码:

import { createApp } from 'vue'
import App from './App.vue'
import { createProxyMiddleware } from 'http-proxy-middleware'

const app = createApp(App)

app.use('/api', createProxyMiddleware({
  target: 'http://api.example.com',
  changeOrigin: true,
  pathRewrite: {
    '^/api': ''
  }
}))

app.mount('#app')

此方式和上面的方式类似,但是它是手动添加的而不是通过 vue.config.js 进行配置。

Logo

前往低代码交流专区

更多推荐