Vue 项目打包发布后 CSS 中的背景图片 404 - 文章教程

Vue 项目打包发布后 CSS 中的背景图片 404

发布于 2020-05-20 字数 1085 浏览 1633 评论 0

Vue 打包的时候,一般小图标都是生成的 Base64 格式的,直接写到了 CSS 文件里面,但是如果图片较大,就会直接引用图片地址而不是生成 Base64 代码。

Vue 项目打包发布后 CSS 中的背景图片 404

比如我这个背景图片

.uHead {
  background: url(../../static/img/uheadBg.jpg) no-repeat center;
  background-size: cover;
  color: #fff;
  padding: 1rem 0.75rem;
  font-size: 0.7rem;
}

打包出来的地址是

http://domain.com/mobile/static/css/static/css/uheadBg.png

这时候,我们只需要修改 build/utils.js 中的 generateLoaders 方法,如下代码,增加 publicPath: ‘../../’:

if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    publicPath: "../../",
    fallback: "vue-style-loader"
  });
} else {
  return ["vue-style-loader"].concat(loaders);
}

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

勿忘心安

文章 0 评论

ekko

文章 0 评论

江挽川

文章 0 评论

献世佛

文章 0 评论

Meets

文章 0 评论