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

Question

我在应用程序中使用 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 开发服务器代理目标，一个 API 就像 getProxyTarget()，但如果 iframe 的 src 可以被代理，那就更好了！

vue.config.js devServer 配置：

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

Answer 1

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

VUE_APP_PROXY_TARGET='http://192.168.1.2:8081'

并在应用内使用它：

process.env.VUE_APP_PROXY_TARGET

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

How to get dev server proxy target inside app?

vue.js

webpack

proxy

webpack-dev-server

devserver