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,但用处不一样,自己试一试就能搞清楚了。
参考文献
标签:index,Vue,静态,ip,路径,html,publicPath,服务器 来源: https://blog.csdn.net/lymmurrain/article/details/111996822