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.3之前为baseUrl ，Vue CLI 3.3后弃用，改为publicPath。

以下是官网描述

• Type: string

• Default: '/'

  部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致，但是 Vue CLI 在一些其他地方也需要用到这个值，所以请始终使用 publicPath 而不要直接修改 webpack 的 output.publicPath。

  默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。

修改此项会影响静态文件的路径。我们需要把静态文件的路径指向广州ip，则把此项改为'http://ip:port/'

module.exports = {
  // 选项...
       publicPath: 'http://ip:port/',
}

修改，build之后，静态文件的路径公共路径会指向'http://ip:port/'。例如，dist文件夹中的css文件夹中的一个文件a.css,其请求路径会是'http://ip:port/css/a.css'。

这时候将dist文件夹的其余文件部署在广州即可。

完成部署后，你只要请求香港服务器获得index.html，而后的静态文件路径是指向广州ip。

但你如果用的Vue router配置中的base为base: process.env.BASE_URL，你会发现前端路由会多出http://ip:port/在前面。解决这个问题把base修改为你要部署的域名的公共路径即可。例如https://www.my-app.com/的话则改为/,如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。

这个用法其实和publicPath，但用处不一样，自己试一试就能搞清楚了。

参考文献

https://cli.vuejs.org/zh/