节点应用程序也提供Vue.js前端:如何在开发过程中支持Vue开发服务器?

时间:2019-07-09 14:57:24

标签: node.js vue.js

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

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

在我以前有此设置之前:

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

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

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

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

npm run serve Vue.js开发服务器了解Vue.js组件文件(* .vue)并动态解压缩(我不知道开发服务器如何真正完成其任务)并提供页面。因此,没有 可以提供真正的JS文件。因此,当请求客户端时,Node服务器将无法提供任何有用的服务,因为一切都发生在dev服务器的“后台”。

我让我的思想徘徊,例如想到:

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

听起来有点太棘手了。

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

1 个答案:

答案 0 :(得分:0)

您使用开箱即用的代理。

  

如果您的前端应用程序和后端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