node.js - Node 应用程序还提供 Vue.js 前端 : how to support Vue dev server while development?

Question

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

• 目标服务器上只有一个应用程序(Node 服务器)
• 以 /api/ 开头的路由将提供后端路由(例如前端的 REST API)
• 以 /client/ 开头的路由将为客户端提供服务器上 client 目录中的静态内容

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

• 提供 REST API 的 Node 服务器
• (Apache) Web 服务器文档根目录中的一个文件夹，用于提供 Vue.js 前端(作为静态 HTML/JS/CSS 文件)

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

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

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

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

我让自己的思绪四处游荡，例如想到:

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

听起来有点太多而且太棘手。

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

Answer 1

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

If your frontend app and the backend API server are not running on the same host, you will need to proxy API requests to the API server during development. This is configurable via the devServer.proxy option in vue.config.js.

devServer.proxy can be a string pointing to the development API server:

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

This will tell the dev server to proxy any unknown requests (requests that did not match a static file) to http://localhost:4000.

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