如何在应用程序内获取开发服务器代理目标？答案

【问题标题】：How to get dev server proxy target inside app?如何在应用程序内获取开发服务器代理目标？
【发布时间】：2021-04-19 09:00:42
【问题描述】：

我在应用程序中使用iframe，我不知道如何通过开发服务器代理它的src，因此我正在这样做

const origin = process.env.NODE_ENV === 'production' ? location.origin : 'http://192.168.1.2:8081'

为了使iframe 在开发模式下工作，'http://192.168.1.2:8081' 在这里是硬编码的，我正在寻找一种方法来重用 webpack 开发服务器代理目标，一个类似于getProxyTarget() 的 API，但是如果 @可以代理987654327@的src，那就更好了！

vue.config.js devServer 配置：

{
  port: 8055,
  proxy: {
    '/api': {
      pathRewrite: {
        '^/api': '',
      },
      target: 'http://192.168.1.2:8081',
      ws: true,
      changeOrigin: true,
    },
  },
}

【问题讨论】：

拥有代理的意义在于应用不必知道请求的真正去向。什么上下文，为什么要访问目标？

标签： vue.js webpack proxy webpack-dev-server devserver

【解决方案1】：

我最终创建了一个环境变量：

VUE_APP_PROXY_TARGET='http://192.168.1.2:8081'

并在应用内使用它：

process.env.VUE_APP_PROXY_TARGET

【讨论】：