打包后,不管原先的图片资源在哪里,路径通通变成static/img/xxxx ,若在HTML里的IMG标签的src引入图片,则正常显示,因为路径是从 index.html 开始寻找的,所以static/img/xxxx是能正确访问到图片。
但是在css/app.css里,在当前的CSS目录下,无 static/img 路径,所以资源找不到。
解决办法:
打开build / utils.js, 修改配置,该设置会把css所有引入的资源的路径变成 …/…/static/img/ ,这样就能找到资源了。
如下:
if( options.extract){
return ExtractTextPlugin.extract({
use: loaders,
fallback: ‘vue-style-loader’,
publicPath:’…/…/’ // 添加在此处
})
} else {
return [‘vue-style-loader’].concat(loaders)
}