Search code examples
vue.jswebpackproxywebpack-dev-serverdevserver

How to get dev server proxy target inside app?

I'm using iframe in the app, I don't know how to proxy it's src via dev server, therefore I'm doing

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

to make the iframe work in development mode, 'http://192.168.1.2:8081' is hard-coded here, I'm looking for a way to reuse the webpack dev server proxy target, an API like getProxyTarget(), but if the iframe's src could be proxied, that's even better!

vue.config.js devServer config:

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

  • I ended up creating an environment variable:

    VUE_APP_PROXY_TARGET='http://192.168.1.2:8081'

    and use it inside the app:

    process.env.VUE_APP_PROXY_TARGET