vue项目使用background-image设置背景图报错的解决

原创已于 2022-02-17 14:07:10 修改 · 6.1k 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #前端

收录于

于 2022-02-17 14:06:31 首次发布

本文探讨了在Vue 2.6及以上版本中，如何修正由于Webpack 4.0引入的路径解析问题，以正确加载背景图片。通过理解Webpack的工作原理，提供了解决方案：使用带有波浪线的路径前缀`~`来避免路径解析错误。

background-image: url("@/assets/images/loginbg.png");
// 会报图片路径不对的错误,因为vue2.5及以下版本这种写法没问题;vue2.6及以上版本,用的是webpack4.0就会导致这种错误，需要换一种写法:
background-image: url("~@/assets/images/loginbg.png");
// 带~的路径会被webpack解析为require(src/assets/images/loginbg.png)