Vue项目:将资源路径使用相对路径后,部分图片无法显示

Vue项目:将资源路径使用相对路径后,部分图片无法显示

绝对路径通过上一篇文档,使用publicPath实现绝对路径转相对路径,这一篇,来说说我之后碰到的问题.
在资源路径改变为相对路径后,我发现代码中比如css引入的图片,它还是处于绝对地址,并且没有办法显示出来,提示为404找不到图片。

  • 解决办法:
    • 通过less或scss,定义一个变量baseUrl,然后通过字符串拼接的方式,在url路径中拼接到原本图片路径的前面即可。
    • scss定义变量使用$开头
    • less定义变量使用@开头
// 这里举例使用scss
$baseUrl: "./";
background-image: url($baseUrl + "img/abc.png");

你可能感兴趣的:(vue项目问题集,vue.js,前端,javascript)