Vue/Webpack + Express (MEVN)：API 调用的 URL，开发与生产

Question

构建 MEVN 应用程序。

当运行在我的开发环境中，同时有两台服务器运行：位于localhost:8080的webpack-dev-server服务于Vue/Webpack-based前端客户端应用程序，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 配置项，但其中 none 以对我有意义的方式解决了这个问题。

这样做的 "right way" 是什么？

Answer 1

比我预期的要快一些。

一个简单的方法是使用 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") 或类似方法。

Vue/Webpack + Express (MEVN)：API 调用的 URL，开发与生产

Vue/Webpack + Express (MEVN): URLs for API calls, development vs production

node.js

express

webpack

vue.js