vue-cli devServer代理绕过

Question

我希望Vue CLI的dev服务器在获取特定URL时返回一个字符串。为此，我想使用webpack dev-server的bypass选项。(webpack docs)

我试过这个：

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

这会导致一个错误：When proxy in package.json is an object, each context object must have a target property specified as a url string。

我不需要target选项(像在this example中一样)

我怎么才能让它工作呢？

Answer 1

devServer.proxy不适合这样做。相反，将您的路由添加到Webpack 4的devServer.before中(在Vue CLI4中使用)：

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

Webpack 5中的...or devServer.onBeforeSetupMiddleware (在Vue CLI5中使用)：

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