webpack - 使用 vue-cli 将请求代理到单独的后端服务器

Question

我正在使用 vue-cli webpack-simple 模板来生成我的项目，我想将请求代理到一个单独的后端服务器。这怎么能轻易实现呢？

Answer 1

在@vue/cli 3.x中:

• 在项目的 root 文件夹中创建一个 vue.config.js 文件(如果您还没有的话)。
• 其内容如下:

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      "/gists": {
        target: "https://api.github.com",
        secure: false
      }
    }
  }
};

现在任何对(假设您的开发服务器位于 localhost:8080)http://localhost:8080/gists 的调用都将被重定向到 https://api.github.com/gists.

另一个例子:代理所有调用

假设您有一个本地后端服务器，通常部署在 localhost:5000 并且您希望将所有对 /api/anything 的调用重定向到它。使用:

// vue.config.js
module.exports = {
    devServer: {
        proxy: {
            "/api/*": {
                target: "http://localhost:5000",
                secure: false
            }
        }
    }
};