vue升级Webpack4后打包的css背景图片路径错误

最新推荐文章于 2023-02-16 20:15:14 发布

胖达的博客

最新推荐文章于 2023-02-16 20:15:14 发布

阅读量1.4k

点赞数

本文链接：https://blog.youkuaiyun.com/qq_34322905/article/details/89563806

版权

在将Vue项目从webpack3升级到webpack4后，遇到css打包时背景图片路径错误的问题。升级后需用mini-css-extract-plugin替换extract-text-webpack-plugin。尝试修改webpack.base.conf.js的rules未完全解决问题，因为img标签的本地引用路径也出现错误。最终通过在utils.js中手动添加publicPath: '../../'，确保返回值与webpack3一致，成功解决了css中的静态背景图片路径问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webpack4升级之后对于css的打包需要用到mini-css-extract-plugin替换掉之前webpack3版本的extract-text-webpack-plugin插件。之前css静态打包对于背景图片需要的是在build文件夹内的utils.js文件中更改为

if (options.extract) {  
return ExtractTextPlugin.extract({    
use: loaders,    
fallback: 'vue-style-loader',    
publicPath: '../../'  // 这行是需要添加的
})} 
else {  
return ['vue-style-loader'].concat(loaders)
}

但是在webpack4升级之后是下面这种情况

// webpack4升级代码  
return [    
options.extract ? MiniCssExtractPlugin.loader : 'vue-style-loader',].concat(loaders)
].concat(loaders)

我试过直接更改 webpack.base.conf.js中的rules

{
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]'),
          //添加路径
          publicPath:'../../',
        }
      },