重现
// 使用脚手架生成项目
vue init webpack
更改config/index.js配置文件build.assetsPublicPath为'./'
在App.vue的<style>中加一个background: url('./asssets/images/xxx.png')之类相对路径引用的样式
此时进行打包命令
npm run build
你会发现提取出来的css中 url()中图片的路径是static/img/xxx.png 这样的,用浏览器打开index.html将会有xxxxxxx/static/css/static/img/xxx.png这个图片404的报错
解决方案
主要是需要单独为css 配置 publicPath,更改build/utils.js文件中 ExtractTextPlugin 插件的options配置：
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
publicPath: '../../', // 注意配置这一部分，根据目录结构自由调整
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
