vue项目设置背景图片?vue打包后背景图片不显示

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

vue项目设置背景图片?vue打包后背景图片不显示

文章插图
【vue项目设置背景图片?vue打包后背景图片不显示】比如我这个背景图片
.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);}


    推荐阅读