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

Question

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

我要做的是一个单页应用程序又称（PWA）有两个Vuejs处理的路由，我假设的主页是（miwebsite.com）和（miwebsite.com/admin），数据获取api调用我的服务器，但我再次对所有这些术语混淆，如服务器端渲染和客户端渲染，我知道服务器端渲染是你有不同的页面，例如你有一个快递路线指向一个关于页面这是否正确呈现？客户端呈现是您通过第一次调用下载所有内容，然后通过api调用使用用户操作更新页面。

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

Answer 1

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

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

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

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

Answer 2

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