vue-cli devServer proxy bypass

Question

I would like Vue CLI's dev server to return a string when a specific URL is fetched. For this, I wanted to use webpack dev-server's bypass option. (webpack docs)

I tried this:

devServer: {
    proxy: {
        '/something': {
            bypass: (req, res) => res.send(process.env.SOMETHING),
        }
    }
}

This causes an error: When proxy in package.json is an object, each context object must have a target property specified as a url string.

I don't need a target option (like in this example)

How can I make this work?

tony19 · Accepted Answer · 2021-09-29 05:21:13Z

3

devServer.proxy isn't appropriate for this. Instead, add your route in devServer.before in Webpack 4 (used in Vue CLI 4):

// vue.config.js
module.exports = {
  devServer: {
    before(app) {
      app.get('/something', (req, res) => res.send(process.env.SOMETHING))
    }
  }
}

...or devServer.onBeforeSetupMiddleware in Webpack 5 (used in Vue CLI 5):

// vue.config.js
module.exports = {
  devServer: {
    onBeforeSetupMiddleware(server) {
      server.app.get('/something', (req, res) => res.send(process.env.SOMETHING))
    }
  }
}

edited Sep 29, 2021 at 5:21

answered Oct 14, 2020 at 4:32

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

vue-cli devServer proxy bypass

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related