构建 MEVN 应用程序。
在我的开发环境中运行时，有两个服务器同时运行:位于 localhost:8080 的 webpack-dev-server 提供基于 Vue/Webpack 的前端客户端应用程序，以及 localhost:8081 为 Node+Express 后端应用程序提供服务，该应用程序提供客户端使用的 RESTful 端点。
但是，在进行生产部署时，Node+Express 服务器除了提供这些端点之外，还为静态 Vue/Webpack 应用程序提供服务，如 in this answer 中所述。 .
我的问题是这样的:要在生产环境中从客户端调用这些端点之一，因为它们都来自同一服务器，所以我只需加载 /route/to/my/endpoint?param =val 或类似的。在开发环境中，由于它们是两个独立的服务器，因此我会加载 http://localhost:8081/route/to/my/endpoint?param=val 。
似乎必须有一些简单的方法来在运行 webpack-dev-server 时在代码中包含 http://localhost:8081 ，但在构建部署时忽略它。
我看过一些讨论 publicPath webpack 配置项的文章，但没有一篇文章能够以对我来说有意义的方式完全解决这个问题。
执行此操作的“正确方法”是什么？
最佳答案
比我预想的要快一些。
实现此目的的一个简单方法是使用 Webpack 的 definePlugin 机制，对此进行了很好的描述 here .
本质上，在我的 webpack.dev.conf.js 的 plugins 部分中，我添加了以下内容:
new webpack.DefinePlugin({
__API__: "'http://localhost:8081'"
}),
在 webpack.prod.conf.js 的同一部分我添加了以下内容:
new webpack.DefinePlugin({
__API__: "''"
}),
然后，在 vue 文件中，当我想访问端点时，调用将如下所示:
axios.get(__API__ + '/myendpoint')
上面文章中提到但很容易错过的关键事项:Webpack 引擎对标识符进行精确的文本替换，在本例中为 __API__，并且由于我的代码需要一个字符串，它必须在 DefinePlugin 中定义，因此它周围有引号。另一种方法是 __API__: JSON.stringify("http://localhost:8081") 或类似方法。
关于node.js - Vue/Webpack + Express (MEVN) : URLs for API calls, 开发与生产，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48931786/