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

Posted 2023-02-22

【中文标题】如何在 Nuxt 中使用 webpack 开发代理

【英文标题】：How to use webpack dev proxy with Nuxt

【发布时间】：2019-02-13 06:36:45

【问题描述】：

使用Nuxt 开发通用JS 应用程序，我正在尝试配置webpack's dev proxy，以便仅在开发中，对/api 的请求被代理到http://127.0.0.1:500/api '将到达 Python REST API。遵循 Nuxt 文档，我在 nuxt.config.js 中有 extended the webpack config，如下所示：

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 路径并执行代理。只是为了确认代理 destination 正在工作，如果我访问 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 开发代理，如果它只能在开发中工作的话。

【问题讨论】：

这个关于类似问题的答案帮助了我***.com/questions/67990952/…

【参考方案1】：

呃，我找错树了。

Nuxt 需要进行代理，即使在生产中也是如此。当我的初始请求被处理并且应用程序在服务器端呈现时，任何 API 请求都需要被代理，因为节点服务器正在执行调用，而不是浏览器，所以这些 API 请求甚至不会像 nginx 那样到达我的生产路由器或 HAProxy（它通常将我的 / 和 /api 路由到相应的服务）。

【讨论】：

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

【参考方案2】：

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

export default 
  // other config ...

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

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

引用用于插入条件对象字段的语法（这是我以前不知道的）： https://***.com/a/51200448