Vuejs 前端 Web 应用程序如何与我的服务器位于同一主机/域中？

Posted 2023-02-22

【中文标题】Vuejs 前端 Web 应用程序如何与我的服务器位于同一主机/域中？

【英文标题】：How a Vuejs front-end web app lives in the same host/domain as my server does?

【发布时间】：2018-03-03 15:00:49

【问题描述】：

我很难弄清楚 Vuejs 前端 Web 应用程序和我用节点编写的服务器之间的区别，当我的应用程序完成后，我可以将我的服务器上传到我的 Web 应用程序所在的同一个域吗？ API 可以调用我的服务器吗？比如说我的 miwebsite.com？

我想做的是一个单页应用程序（PWA），它有两个 Vuejs 处理的路由，我假设主页是（miwebsite.com）和（miwebsite.com/admin），数据获取对我的服务器进行 api 调用，但我再次对所有这些术语感到困惑，例如服务器端渲染和客户端渲染，我知道服务器端渲染是你有不同的页面，例如你有一个带有 express 的路由指向一个关于页面这得到呈现的权利？客户端渲染是您在第一次调用时下载所有内容，然后通过 api 调用使用用户操作更新页面。

但是，例如，看起来像 api.mywebsite.com 的域和 mywebsite.com 之间有什么区别？他们住在同一个域名/主机中吗？

【参考方案1】：

最终，您的网络服务器决定了对给定 HTTP 请求的回复内容。 为了使 Vue 部分正常工作，您的 Web 服务器必须提供一个 html 页面，该页面引用一个 javascript 包，该包包含您的应用程序及其可能的依赖项（在本例中为 Vue）。 因此，您应该配置您的网络服务器的mywebsite.com 虚拟主机 以响应/ 和/admin 路径的此类HTML 页面。 对于大多数默认配置，只需指向包含 index.html 和依赖项的目录（例如 scripts/app.js 和可能的 scripts/vue.js）就足够了。

要使 API 调用正常工作，有两种常见模式：

将 API 嵌套在同一域 (mywebsite.com/api) 上的单独路径中。在这种情况下，您应该将 Web 服务器配置为转发到/api 路径的所有请求到单独的后端服务。在 Apache 中你可以使用 mod_proxy，在 nginx 中你可以使用 mod_http_proxy。 在单独的域上托管 API。 (api.mywebsite.com)。在这种情况下，您还需要为整个虚拟主机配置反向代理。

注意：以上假设您的后端位于与您的网络服务器不同的服务中。如果你想使用例如。 mod_php，您需要使用一些 URL 重写（Apache 中的 mod_rewrite）来实现相同的目的。

【讨论】：

如何创建一个响应 Vuejs 请求的虚拟主机？假设我的 express 服务器和 vuejs 应用程序都在不同的端口上运行？ express 可能运行在 3000 端口，vuej 运行在 8080

（如果您事先声明使用 express 会很有帮助）快速 Google 找到了 express-http-proxy module，您可以使用 app.use('/api, proxy('localhost:3000')); 对于第二种情况，您可以使用 @ 987654334@选项，看看req.headers['Host'] === "api.mywebsite.com"

【参考方案2】：

根据我的经验，在单独的域中托管 API 是最好的方法。因为 VueJS 和相关的单页应用程序（SPA）技术很大程度上基于缓存。这意味着一旦您进入 SPA，您的浏览器就会缓存您的网页，之后，您的所有静态路由也会缓存在浏览器上，并且再也不会发送到后端。如果您在 domain.com/API 上托管您的 API，并在 Nginx 或 apache 服务器上进行端口代理，并且您的 SPA 在 domain.com 上运行，那么第一次它可以正常工作，但是在您的浏览器缓存之后，它永远不会向您的 API 发送静态路由.所以使用单独的域是最好的方法。