项目打包后路径错误导致404。
主要原因：
webpack打包以后，在dist文件中生成一个static的目录和一个index.html，会默认把图片路径改为'static/img'，这样的路径错误的取不到图片。
// 代码是没问题的在页面中正常显示
.page-content .my {
width: 100%;
.h(130);
.lh(130);
background: url("~@/assets/images/personnel/lc-bg.png");
background-repeat: no-repeat;
background-size: contain;
display: flex;
.mb(44);
}
打包后的页面在dist文件中：
打包后的dist.jpg
打包后的错误路径：
url错误.jpg
解决办法：
在 build/utils.js 文件中添加publicPath: '../../'，重新打包上传到服务器，再运行图片就出现了
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
解决路径出错的办法.png
修改之后图片就出来了
修改utils.js文件之后.jpg
