Using Nuxt https://nuxtjs.org为了开发一个通用的 JS 应用程序,我正在尝试配置webpack 开发代理 https://webpack.js.org/configuration/dev-server/#devserver-proxy以便,仅在开发中,要求/api
被代理到http://127.0.0.1:500/api
他们将在其中访问 Python REST API。按照 Nuxt 文档,我已经扩展了 webpack 配置 https://nuxtjs.org/faq/extend-webpack/ in 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 http://127.0.0.1:8080/api/things,我的 Nuxt 应用程序返回(它在开发中的端口 8080 上运行),表明 webpack 开发代理没有捕获/api
路径并执行代理。只是为了确认代理目的地正在工作,如果我访问http://127.0.0.1:5000/api/things http://127.0.0.1:5000/api/things,我得到了预期的 API 响应。为什么当我扩展 Nuxt webpack 配置以启用 webpack 开发代理时,代理不起作用?
然而,我已经取得了成功@nuxt/代理 https://github.com/nuxt-community/proxy-module模块,但关键的是,我找不到一种方法让它只影响开发而不影响生产。那部分nuxt.config.js
看起来像这样:
axios: {
proxy: true
},
proxy: {
'/api': 'http://127.0.0.1:5000'
},
我很高兴使用 @nuxt/proxy 模块而不是(在其之上?)webpack 开发代理,如果它只能在开发中工作的话。