dev 環境下背景圖片正常顯示,但是打包後路徑不對,無法顯示
網上其他解決參考如下
經常遇見的問題是 css 中 background-image 的相對路徑不能正確的引用到 img 文件夾中。但是用 ExtractTextWebpackPlugin 的 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)
}
但是我項目是使用了 mini-css-extract-plugin
最後解決如下:更改 build/utils.js 文件中
if (options.extract) {
loaders.push({
loader: MiniCssExtractPlugin.loader,
options: {publicPath:'../../'}
})
} else {
loaders.push('vue-style-loader')
}