Node.js Vue/Webpack+；Express（MEVN）：API调用的URL，开发与生产

构建MEVN应用程序

在我的开发环境中运行时，有两台服务器同时运行：位于

localhost:8080的webpack dev server提供基于Vue/webpack的前端客户端应用程序，以及
localhost:8081
提供客户端使用的RESTful端点的Node+Express后端应用程序

但是，当部署用于生产时，Node+Express服务器除了提供这些端点外，还提供静态Vue/Webpack应用程序，如上所述

我的问题是：要在生产环境中从客户机调用其中一个端点，因为它们都来自同一台服务器，我只需加载
/route/To/My/endpoint？param=val
或类似文件即可。在开发环境中，因为它们是两个独立的服务器，所以我要加载
http://localhost:8081/route/to/my/endpoint?param=val

似乎必须有一些简单的方法来包含
http://localhost:8081
在运行webpack dev服务器时在代码中，但在构建部署时忽略它

我看过一些关于
publicPath
webpack配置项的文章，但是没有一篇文章以对我有意义的方式来解决这个问题

做这件事的“正确方法”是什么？
比我预期的要快一点

实现这一点的一个简单方法是使用Webpack的
definePlugin
机制，该机制描述得很好

实际上，在我的
webpack.dev.conf.js
的
plugins
部分，我添加了以下内容：

new webpack.DefinePlugin({
  __API__: "'http://localhost:8081'"
}),

new webpack.DefinePlugin({
  __API__: "''"
}),

在
webpack.prod.conf.js的同一部分中，我添加了以下内容：

new webpack.DefinePlugin({
  __API__: "'http://localhost:8081'"
}),

new webpack.DefinePlugin({
  __API__: "''"
}),

然后，在vue文件中，当我想点击端点时，调用如下所示：

axios.get(__API__ + '/myendpoint')

上面的文章中提到了一个关键的问题，但很容易忽略：webpack引擎对标识符进行精确的文本替换，在本例中是，
\uuuuu API\uuuu
，因为我的代码需要一个字符串，所以它必须在DefinePlugin中定义，所以它周围有引号。另一种方法是
\uuuuu API\uuuu:JSON.stringify（“http://localhost:8081”
或类似文件