vue-cli devServer代理绕过

Question

我希望 Vue CLI 的开发服务器在获取特定 URL 时 return 一个字符串。为此，我想使用 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 CLI 4 中使用）：

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

...或 Webpack 5 中的 devServer.onBeforeSetupMiddleware（在 Vue CLI 5 中使用）：

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

vue-cli devServer代理绕过

vue-cli devServer proxy bypass

javascript

vue.js

webpack-dev-server

vue-cli-3