问题出现
在做 hugsy-note 这个项目时,我在登录界面设置了背景图片(18年去日本时拍摄的漂亮的樱花!),在本地开发环境时,一切都显示正常,但 build 打包之后,单独将 dist 目录上传部署到 Github 后,加载出来的 GitHub Pages 上我的背景一篇空白,我的樱花呢?
点开 network 后一看,404,请求路径居然变成了:terremou.github.io/hugsy-note-website/static/img/static/img/flower.jpg,而正确的请求路径应该是:terremou.github.io/hugsy-note-website/static/img/flower.jpg。
而神奇的是,我同样在登录页面设置的 logo 图片,却成功展示了,请求路径也是正确的。于是我就开始考虑问题出在了哪里...... 经过检查,发现这两张图片的区别在,我是直接在 template 使用 <img> 标签直接引用的 logo 图片,而我出现 404 的樱花背景图,是我用在 style 标签中引用的,对比如下:
下面是解决方法!
于是我怀疑是 CSS 在打包后被单独抽离出来的时候,在 CSS 中引用的图片的相对路径关系发生了改变,所以我修改了 build/utils.js 中的配置,新增一个publicPath,代码如下:
重新打包部署到 ghpages 上后,刷新刷新刷新,再加载出来的登录页面,就有漂亮的樱花背景啦!