vue引入背景图问题

直接使用原来的css写法：

background: url('./src/assets/theme/logo_blue.png')

 会报Module not found: Error: Can't resolve './src/assets/theme/logo_blue.png' in'xxx'错误

需要加上~@

background-image:url('~@/assets/logo.png');

 

webpack资源处理的规则,分为相对路径,没有前缀的路径,带~的路径,相对根目录的路径

1.相对路径: "./assets/logo_blue.png"
2.没有前缀的路径 "assets/logo_blue.png" 被webpack解析为 相对路径
3.带~的路径  "~@/assets/theme/logo_blue.png" 被webpack解析为 require(src/assets/theme/logo_blue.png) 动态引入
@在webpack 被resolve.alias配置下等价于/src
4.相对根目录的路径 "/assets/logo_blue.png" webpack不解析