vue的图片路径引用问题解决

Posted 2023-04-01

参考技术A 我们需要在template，script，style下引用图片，如下。
比如

这里能用 @assets 是因为在 vue.config.js 里面设置了如下参数。

本地开发的时候，因为域名是 http://localhost:8080 ，也就是 / ，vue自动帮你转换成相对 / 路径。
build的时候，vue默认把图片路径指定在 / 下。图片地址也就是在 /img/xxx.jpg 。
如果项目部署在域名是 http://www.aaa.com/vue/ ， /img/xxx.jpg 自然找不到图片。
我们build的时候需要指定一个路径 /vue/ ，因为 vue/img/xxx.jpg 是正确的路径。
修改 vue.config.js 配置即可。