vue项目打包之后背景图片出错的解决方案如下：
1，找到 config->index.js里面，如下修改
默认配置：
env: require(‘./prod.env‘),
index: path.resolve(__dirname, ‘../dist/index.html‘),
assetsRoot: path.resolve(__dirname, ‘../dist‘),
assetsSubDirectory: ‘static‘,
assetsPublicPath: ‘/‘,
修改为：
env: require(‘./prod.env‘),
index: path.resolve(__dirname, ‘../hgpc/index.html‘),
assetsRoot: path.resolve(__dirname, ‘../hgpc‘),
assetsSubDirectory: ‘./static‘,
assetsPublicPath: ‘./‘,
2，找到 build->utils.js,在里面加入一句publicPath:‘../../‘,
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
publicPath:‘../../‘,
fallback: ‘vue-style-loader‘
})
} else {
return [‘vue-style-loader‘].concat(loaders)
}
}
3，配置修改完成，接下来，使用有两种方式，这里一般和文件结构有关，下面是我的文件结构下的使用
注意事项（分两种情况）：
第一种：图片资源放在 assets->img文件夹下面
1，img标签引入图片
<img src="../assets/img/loginback.png" class="test-img" />
2，css使用图片
background: url(‘../assets/img/loginback.png‘) no-repeat top left ;
第二种：图片资源放在static->img文件夹下面
1，img标签引入图片
<img src="../../static/img/loginback.png" class="test-img" /><br><img src="static/img/loginback.png" class="test-img" />
2，css使用图片
background: url(‘../../static/img/loginback.png‘) no-repeat top left ;
原文地址：https://www.cnblogs.com/maqingyuan/p/8445008.html