如何在 Vercel 中使用 Vue 前端部署 Express 应用程序？

Question

我将 Vue 应用程序构建到名为 dist 的文件夹中。

我有用 Node Express 编写的后端 API。

当我在 Vercel 上部署它时，出现 404 错误。

这是我的应用程序结构和 Vercel 设置。

我是 Vercel 新手，如有任何帮助，我们将不胜感激。

应用程序结构

package.json

vercel.json

Vercel 设置

维塞尔错误：

Answer 1

了解 Vercel 对托管 Vue 和 Express 应用程序的限制

如果您尝试在 Vercel 上部署 Vue.js 前端和 Express 后端并遇到 404 错误，请务必了解 Vercel 主要是为静态站点和无服务器功能而设计的。以下是需要考虑的一些关键点：

无服务器端渲染 (SSR)： Vercel 未针对传统服务器端渲染进行优化。虽然它支持无服务器功能，但它不提供运行完整 Express 应用程序所需的持久 Node.js 实例。

托管限制：如果您的 Express 应用程序依赖于 服务器端渲染或需要长期运行的 Node.js 服务器，Vercel可能不是正确的选择。相反，请考虑专门为托管完整 Node.js 应用程序而设计的平台，例如 Heroku、DigitalOcean 或 AWS。

推荐的解决方案：如果您需要同时部署 Vue.js 前端和 Express 后端，请考虑使用 Heroku 等服务，它可以托管整个 Node.js 服务器并有效处理路由。这种方法可以在前端和后端之间实现更加无缝的集成，从而实现 API 调用和动态内容生成等功能。

总而言之，虽然 Vercel 擅长部署静态站点和无服务器功能，但如果您需要完整的 Express 应用程序，您可能需要探索提供专用 Node.js 环境的替代方案。