Node 应用也提供 Vue.js 前端：开发时如何支持 Vue 开发服务器？

Question

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

• 在目标服务器上，只有一个应用程序（Node 服务器）
• 以/api/ 开头的路由将提供后端路由（例如前端的 REST API）
• 以/client/ 开头的路由将作为来自服务器上client 目录的静态内容提供给客户端

在此之前我曾经有过：

• 为 REST API 提供服务的节点服务器
• （Apache）Web 服务器的 Document Root 中的一个文件夹，它提供 Vue.js 前端（作为静态 HTML/JS/CSS 文件）

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

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

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

npm run serveVue.js 开发服务器了解 Vue.js 组件文件 (*.vue) 并动态解包它们（我承认我不知道开发服务器如何真正完成其任务）并为页面提供服务。因此， 没有真正的 JS 文件可供服务。因此，当客户端被请求时，Node 服务器无法提供任何有用的服务，因为这一切都发生在开发服务器的“幕后”。

我让我的思绪徘徊，例如想到了：

• 启动 Vue.js 开发服务器 (npm run serve)
• 将 Node Express 应用配置为不为客户端使用静态内容，而是反向代理转发到 Vue.js 开发服务器

听起来有点太多，太棘手了。

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

Answer 1

您使用的是开箱即​​用的代理。

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

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

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

这将告诉开发服务器代理任何未知请求（请求 与静态文件不匹配）到http://localhost:4000。

来源：https://cli.vuejs.org/config/#devserver-proxy