重現(xiàn)
// 使用腳手架生成項(xiàng)目
vue init webpack
更改config/index.js配置文件build.assetsPublicPath為'./'
在App.vue的<style>中加一個(gè)background: url('./asssets/images/xxx.png')之類(lèi)相對(duì)路徑引用的樣式
此時(shí)進(jìn)行打包命令
npm run build
你會(huì)發(fā)現(xiàn)提取出來(lái)的css中 url()中圖片的路徑是static/img/xxx.png 這樣的,用瀏覽器打開(kāi)index.html將會(huì)有xxxxxxx/static/css/static/img/xxx.png這個(gè)圖片404的報(bào)錯(cuò)
解決方案
主要是需要單獨(dú)為css 配置 publicPath,更改build/utils.js文件中 ExtractTextPlugin 插件的options配置：
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
publicPath: '../../', // 注意配置這一部分，根據(jù)目錄結(jié)構(gòu)自由調(diào)整
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
