vue 项目踩坑:build 打包后部署 ghpages 时图片加载路径错误

762 阅读1分钟

问题出现

在做 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 标签中引用的,对比如下:

image.png

image.png

下面是解决方法!

于是我怀疑是 CSS 在打包后被单独抽离出来的时候,在 CSS 中引用的图片的相对路径关系发生了改变,所以我修改了 build/utils.js 中的配置,新增一个publicPath,代码如下:

image.png

重新打包部署到 ghpages 上后,刷新刷新刷新,再加载出来的登录页面,就有漂亮的樱花背景啦!

附加:部署子目录时,需要修改 config/index.js 中的 assestsPublicPath

image.png