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.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/

上一篇:yii 用户登录验证(cwebuser) yii 用户登录 (记)


下一篇:webpack(5) 文件打包分类