Question

构建MEVN应用程序。

在我的开发环境中运行时，有两台服务器同时运行：localhost:8080的webpack-dev-server服务于基于Vue / Webpack的前端客户端应用程序，localhost:8081服务于Node + Express后端应用程序，它提供客户端消耗的RESTful端点。

但是，在部署生产时，除了提供这些端点之外，Node + Express服务器还按照in this answer所述的方式为静态Vue / Webpack应用程序提供服务。

我的问题是：要从生产环境中的客户端调用其中一个端点，因为它们都来自同一台服务器，我只能加载/route/to/my/endpoint?param=val或类似的。在开发环境中，由于它们是两个独立的服务器，因此我会加载http://localhost:8081/route/to/my/endpoint?param=val。

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

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

＆＃34;正确的方式＆＃34;这样做？

Answer 1

比我想象的要快一点。

一种简单的方法是使用Webpack的definePlugin机制，很好地描述了here。

基本上，在我plugins的{{1}}部分，我添加了这个：

webpack.dev.conf.js

在new webpack.DefinePlugin({ __API__: "'http://localhost:8081'" }),的同一部分中我添加了这个：

webpack.prod.conf.js

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

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

在上面的文章中提到但很容易错过的重要事情：webpack引擎确实替换了标识符，在本例中为axios.get(__API__ + '/myendpoint')，并且因为我的代码需要一个字符串，所以它必须是在DefinePlugin中定义，因此它有引号。另一种方法是__API__或类似。

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

1 个答案: