我正计划使用Laravel作为后端REST API和使用此API的Vue.js前端创建多页Web应用。
首先要明确的是，我对确切如何设置代码片段不感兴趣，除非有一些片段可以帮助可视化该体系结构。
我想知道的是如何以完全分离的方式部署此“拆分堆栈”。即这两个堆栈都不共享代码库，并且都存储在完全独立的存储库中。
除jQuery之外，我对JavaScript框架不是很熟悉，所以我认为我的理解不足主要在于Vue.js部门。一些特别突出的问题是：
Vue.js应用程序可以由Web服务器托管以提供静态HTML文件吗（如果可以），兼容哪个文件？
前端和后端服务都可以在同一服务器上（例如在不同的端口上）运行吗，对此有什么最佳实践？
以这种方式运行Web应用程序会对登录身份验证产生什么影响？我应该考虑在前端和后端之间创建某种OAuth身份验证吗？
在阅读了许多博客文章之后，很明显，这种架构是可行的，但是我正在努力寻找有关如何将其配置为完全独立的详细信息。
这里的工具和技术并不一定重要，但是Vue.js和Laravel的任何细节都值得赞赏。
答案 0 :(得分：3)
我有一个带有ExpressJS后端的VueJS前端，这与您所说的非常相似。是的，这完全有可能。因此，让我们分别看一下您的每个问题。
Web服务器可以托管Vue.js应用程序来提供静态HTML文件吗（如果可以），哪个兼容？
是的，当您运行VueJS时，可以build作为静态应用程序，也可以serve作为NodeJS应用程序。
请参阅Vue CLI 3文档here的“部署”部分。它说明了如何使用/dist目录以您打算的方式为VueJS应用程序提供服务。
前端和后端服务都可以在同一服务器上（例如在不同的端口上）运行，对此有什么最佳实践吗？
我最近发布了一个示例，说明如何在同一服务器here上同时托管您的前端和API。 （包括编码示例和说明）。此答案引用ExpressJS作为API，但原理相同。确实，只需让前端在端口80上侦听，并使API在另一个未使用的端口（即8081）上运行即可。
以这种方式运行Web应用程序会对登录身份验证产生什么影响？我应该考虑在前端和后端之间创建某种OAuth身份验证吗？
我在后端处理所有身份验证。基本上，在Vue路由器中，您可以设置secure参数。然后在最后声明一个router.beforeEach((to,from,next) => {});调用。然后，此调用应检查用户是否具有有效的登录令牌，并在设置了带有要求用户登录的URL的cookie后，将其重定向到应用程序登录页面，以便在登录后将其发送回。
在我们的案例中，我们已将用户重定向到VueJS路由/saml/login。 /saml/login组件。该组件调用API，并返回用户应重定向至登录的地址。在我们的例子中，它是API（在同一服务器上运行，但端口不同[请参见上面的答案]），网址为www.example.com:8081/api/v1/saml_login。然后，它与IDP一起使用并接收令牌和用户数据。这也是您执行ACS功能（配置用户，更新登录时间或用户数据等）的地方。收到令牌后，将其放入Cookie或其他占位符中，以便可以根据令牌进行验证。最初验证用户时存储在数据库中的令牌。 （最佳做法是在令牌上设置过期时间）。然后，将用户重定向到存储在cookie中的url，该URL使我们知道要求他们从何处登录，以便他们可以查看其内容而无需再次查找。 （如果需要，很乐意分享此代码）
答案 1 :(得分：0)
我认为使用Firebase或Auth0身份验证是执行此操作的最佳方法之一。 Firebase或Auth0将为您处理所有身份验证，并允许您的后端验证前端的真实性。这样一来，将两者分开变得更加容易。
有一个用于将Laravel连接到Firebase的管理SDK，并且有用于Vue的模板和现有身份验证SDK。有几篇文章对此进行了描述，但是我还没有看到将其组合在一起的任何东西。我能够从2到3篇不同的文章中弄清楚，最终比我想象的要容易。