Vue的index.html与其他静态文件分离部署

Vue的index.html与其他静态文件分离部署

概述

需求

开发类似论坛的网站，由于域名备案政策，作为个人开发者很难备案成功，当然因为懒也没去尝试过。所以部署web的服务器只能选择香港的。但又因为穷，只能买最低配的1G1核，1M宽带的服务器。就这配置SSH连上去都费劲，还经常会丢包，那就更别说处理繁杂的请求了。刚好双11趁优惠买了个广州的轻量云，以及以学生的身份买了个广州的轻量云。

那么需求就来了，域名解析至香港服务器，香港服务器提供index.html文件，而其他静态文件以及网站api的路径则指向广州的两台服务器集群(见笑了)。由于如果域名解析到国内必须备案，所以指向广州服务的地址是用的ip地址。

选择

一般的Vue部署只需build后将dist文件夹部署到服务器即可。dist中有index.html,以及其他静态文件夹。

那么当我们如果有需求将index.html文件与其他静态文件分开两个部署到多个服务器该如何是好呢。我想两个抛砖引玉哈。

一个简单的方法是通过香港服务器的nginx反向代理，根据请求路径做代理，代理到广州服务器。这个选择对于我的需求不符合，nginx反向代理的性能瓶颈，宽带瓶颈被香港服务器的配置限制死了。

所以静态文件以及网站api的路径需直接指向广州的ip地址。api好办，只需写死url即可，那静态文件如何做，我们从Vue入手。

本文使用的Vue CLi为4.0，以香港服务器提供index.html,广州提供其他静态文件为例。

步骤

注意，此项在Vue CLI 3