如何将webpack dev proxy与Nuxt一起使用

使用来开发一个通用JS应用程序，我试图进行配置，以便仅在开发过程中，对

/api

的请求被代理到

http://127.0.0.1:500/api

在那里他们将获得Python REST API。在Nuxt文档之后，我在

numxt.config.js

中看到了如下内容：

build: {
  extend (config, { isDev }) {
    // Proxy /api to Python only in dev
    if (isDev) {
      const devServer = {
        proxy: {
          '/api': 'http://127.0.0.1:5000'
        }
      }
      config.devServer = devServer;
    }
  }
}

如果我记录配置，我会看到所应用的更改：

...
devServer: { proxy: { '/api': 'http://127.0.0.1:5000' } } }
...

然而，当我访问时，返回我的Nuxt应用程序（它在dev中的8080端口上运行），这表明webpack dev代理没有捕获

/api

路径并执行代理。为了确认代理目标正在工作，如果我访问，我会得到预期的API响应为什么我扩展了Nuxt webpack配置以启用webpack dev代理时，代理不起作用？

然而，我在模块方面取得了成功，但关键是，我无法找到一种方法使其只影响开发而不影响生产。

numxt.config.js

的这一部分如下所示：

axios: {
  proxy: true
},
proxy: {
  '/api': 'http://127.0.0.1:5000'
},

---

我很高兴使用@numxt/proxy模块，而不是（在上面？）网页开发代理，如果它只能在开发中工作的话。

啊，我找错了方向

---

Nuxt需要代理，即使在生产中也是如此。当处理我的初始请求并在服务器端呈现应用程序时，需要代理任何API请求，因为节点服务器正在执行调用，而不是浏览器，因此这些API请求甚至不会击中我的生产路由器，如nginx或HAProxy（这通常会将我的

/

和

/api

路由到相应的服务）。

我需要这样做，并且能够使用nuxt.config.js中的以下命令解决此问题

export default {
  // other config ...

  ...process.env.NODE_ENV === 'development' && {
    proxy: {
      '/api': 'http://localhost:8000',
    }
  },
}

如果我们正在进行开发构建，那么这段代码只会在nuxt配置中添加代理密钥

引用用于插入条件对象字段的语法（我以前不知道）：

---

但有时所有请求都是从客户端发送的，比如提交表单。在这种情况下，仍然需要仅在开发中使用代理。