Node.js 同时提供Vue.js前端的节点应用程序：如何在开发过程中支持Vue dev server？

我有一个带有NodeJS后端的典型Vue.js应用程序。出于身份验证的目的（在本例中为CAS），我决定通过后端交付前端。换言之：

• 在目标服务器上，只有一个应用程序（节点服务器）
• 以

  /api/

  开头的路由将服务于后端路由（例如前端的REST api）
• 以

  /client/

  开头的路由将作为服务器上

  client

  目录中的静态内容提供给客户端

在此设置之前，我曾经有：

• 为RESTAPI提供服务的节点服务器
• （Apache）web服务器文档根目录中的一个文件夹，用于交付Vue.js前端（作为静态HTML/js/CSS文件）

与“拥有Apache和Node”相比，“一台服务器”设置的最大优势在于，每当请求客户端时，CAS身份验证过程都可以由后端自行处理。成功完成CAS登录后，用户将在节点会话中注册，并接受对

/client/

的请求

因此，Vue.js应用程序不必以任何方式处理身份验证，它只需从后端获取当前用户，因为它可以保证用户在浏览器中看到客户端时立即存在有效会话

这在服务器上运行良好。但是我的问题是：在使用此设置进行开发时，如何从热插拔Vue.js dev服务器中获益？节点后端无法与Vue.js dev服务器配合-让我解释一下原因：

npm run serve

Vue.js开发服务器了解Vue.js组件文件（*.Vue）并动态解包（我承认我不知道开发服务器如何真正完成其任务）并提供页面服务。因此，没有真正的JS文件提供服务。因此，当客户端被请求时，节点服务器无法提供任何有用的服务，因为所有这些都发生在dev服务器的“幕后”

我心不在焉，例如想到：

• 启动Vue.js开发服务器（

  npm运行服务

  ）
• 将Node Express应用程序配置为不为客户端使用静态内容，而是反向代理转发到Vue.js dev服务器

听起来有点太多太棘手了

---

有人使用过这样的设置并解决了这个问题吗？我不敢在Node应用程序中为开发模式引入太多的特殊语句。。我错过了一个更简单的方法吗？

您使用了一个现成支持的代理

如果您的前端应用程序和后端API服务器未在 在同一主机上，您需要将API请求代理到API服务器 在开发过程中。这可以通过devServer.proxy进行配置 vue.config.js中的选项

proxy可以是指向开发API的字符串 服务器：

这将告诉dev服务器代理任何未知请求（请求 与不匹配的静态文件）

---

来源：

您使用的是一个现成支持的代理

如果您的前端应用程序和后端API服务器未在 在同一主机上，您需要将API请求代理到API服务器 在开发过程中。这可以通过devServer.proxy进行配置 vue.config.js中的选项

proxy可以是指向开发API的字符串 服务器：

这将告诉dev服务器代理任何未知请求（请求 与不匹配的静态文件）

---

来源：

啊，很有趣-我不知道这件事。但在我的用例中，服务器必须截获任何客户端请求，以便CAS身份验证进程可以“插话”并执行身份验证工作，然后继续处理客户端请求。所以反过来说：客户端不应该将“其他”请求代理到后端（我可以使用

devServer

设置），但是后端必须在客户端请求期间立即跳入，以防我们未经授权。啊，对不起。我误解了。谢谢你的澄清。啊，很有趣-我不知道这件事。但在我的用例中，服务器必须截获任何客户端请求，以便CAS身份验证进程可以“插话”并执行身份验证工作，然后继续处理客户端请求。所以反过来说：客户端不应该将“其他”请求代理到后端（我可以使用

devServer

设置），但是后端必须在客户端请求期间立即跳入，以防我们未经授权。啊，对不起。我误解了。谢谢你的澄清。

// vue.config.js
module.exports = {
  devServer: {
    proxy: 'http://localhost:4000'
  }
}