在vue-cli项目中build/utils.js中找到如下代码块,添加
publicPath:’../../’
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath:'../../' //添加这句话
})
} else {
return ['vue-style-loader'].concat(loaders)
}
vue会用loader将项目中的各种本地URL转换
build后F12查看network,发现资源404,并且去查找的路径是
/dist/static/css/static/img/boston.0d72519.jpg
显然,css中引用的图片地址有问题,需要返回上两级目录。
CSS中引用的字体文件,图片文件路径错误的问题都解决了。