如何将Node.js和Vue.js应用程序一起部署？

Question

我知道这里已经有类似的问题，但我需要更详细的解释。

我有一个VPS（通过Vultr），当前在端口8080上托管了一个前端Vue.js应用程序和一个在端口5000上使用Express的后端Node.js应用程序。主目录如下：

• ./client
  • 前端Vue.js文件
• ./server
  • 后端Node.js文件

前端应用程序包括一个联系表单，提交后会向后端应用程序发出axios POST请求。然后，后端应用程序使用Nodemailer和Gmail帐户发送一封带有表单提交信息的电子邮件。

目前，我必须同时在不同端口上运行Vue.js应用程序和Node.app。考虑到它们实际上只是一个连贯应用程序的部分，并且我的目标是将其作为网站托管在端口80上，这似乎对我来说很奇怪。因此，我想问一下，在托管前端Vue.js应用程序和后端Node.js应用程序时，标准做法是什么。

感谢您提前的回复。

- Skjervoy

---

这是单页应用吗？后端的作用是什么？如果只是REST，则应挂载到/api或子域。 - Estus Flask

这取决于你的应用程序是否使用路由器，如果是这样，你需要始终提供index.html，而不考虑路由。如果你使用历史模式，你可能需要在服务器上使用一些库。 - Mladen Skrbic

这是我在尝试实现相同功能时使用的库。https://www.npmjs.com/package/express-history-api-fallback - Mladen Skrbic

我认为你不理解什么是SPA（单页应用程序）... 单页应用程序确实使用其框架提供的路由器。 - Mladen Skrbic

单页应用程序意味着所有路由都在客户端而不是服务器上完成。当您在SPA中单击某个链接以转到其他页面时，页面不会重新加载...这就是SPA的优势，但它也带来了一些折衷，例如较慢的初始页面加载... - Mladen Skrbic

Answer 1

请尝试用这种方式考虑，Vue.js 是另一个 JavaScript 库。因此，如果可以将所有 Vue 模板代码捆绑在一个文件中，则可以在 index.html 中使用该文件（我希望您知道如何使用 express 托管基本静态页面）。您需要的是“包捆绑器”，例如 webpack 或 gulp。 包捆绑器可帮助您压缩和捆绑代码。因此，只需将所有 Vue 文件捆绑到一个 JavaScript 文件中即可使用它。很抱歉我无法为您详细解释，希望对您有所帮助。

- Saurav