webpack - 如何在 Nuxt 中使用 webpack 开发代理

Question

使用 Nuxt为了开发一个通用的 JS 应用程序，我正在尝试配置 webpack's dev proxy因此，仅在开发中，请求 /api被代理到 http://127.0.0.1:500/api他们将在哪里访问 Python REST API。按照 Nuxt 文档，我有 extended the webpack config在 nuxt.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' } } }
...

然而，当我访问 http://127.0.0.1:8080/api/things ，我的 Nuxt 应用程序被返回(它在 dev 的 8080 端口上运行)，表明 webpack dev 代理没有捕获 /api路径并执行代理。如果我访问 http://127.0.0.1:5000/api/things，只是为了确认代理目的地正在工作，我得到了预期的 API 响应。 为什么，当我扩展 Nuxt webpack 配置以启用 webpack dev 代理时，代理不起作用？

然而，我在 @nuxt/proxy 上取得了成功。模块，但至关重要的是，我找不到一种方法让它只影响开发而不影响生产。 nuxt.config.js 的那部分看起来像这样:

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

我很高兴使用 @nuxt/proxy 模块而不是(在上面？)webpack 开发代理，如果它只能在开发中工作。

Answer 1

我需要这样做，并且能够使用 nuxt.config.js 中的以下内容来解决这个问题

export default {
  // other config ...

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

如果我们正在进行开发构建，此代码只会在 nuxt 配置中添加代理 key 。
引用用于插入条件对象字段的语法(这是我以前不知道的):
https://stackoverflow.com/a/51200448