Webpack配置打包后图片路径问题及解决方案
webpack 打包图片路径出错的锅，多人都背过。我之前一个项目也踩过类似坑：开发环境一切正常，打包上线后背景图突然“失踪”。检查了一下，路径居然是/static/img/xxx.png，而实际目录是../static，直接 404。
路径不对，基本都是 webpack 配置惹的祸。你可以先去看下webpack.base.conf.js里的url-loader那块，有时候publicPath或者outputPath没写对，就容易导致路径从相对变成绝对。
我当时就是因为图片路径前面多了个/，webpack 默认当成根目录来了。你把它改成./static或../static试试，效果立竿见影。
另外，如果你用的是 Vue 脚手架，别忘了看看vue.config.js里的assetsDir和publicPath。这些设置会影响资源路径，稍不注意就踩坑。
对了，这几篇文章挺值得一看：
如果你也遇到图片加载失败，不妨先看下路径对不对，再查查 loader 配置，基本能搞定。
文件大小：116.38KB
评论区