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:
stringDefault:
'/'部署应用包时的基本 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，但用处不一样，自己试一试就能搞清楚了。
django修改静态资源指向
一般我们在django的template中load static的方式在html文件中载入static文件，该文件的路径是根据settings中的STATIC_URL生成的。STATIC_URL也有路径映射的功能，但不需要用这个功能。
相对路径
当STATIC_URL为相对路径时，static文件的请求路径为当前域名+STATIC_URL+文件在STATIC_ROOT的相对路径
绝对路径
当STATIC_URL为绝对路径时，static文件的请求路径为STATIC_URL+文件在STATIC_ROOT的相对路径。
修改静态资源指向
在使用template中load static，可以修改STATIC_URL为目的域名或者目的ip(包含http://)达到修改静态资源指向的目的
