深入浅出vue图片路径的实现(2)

let number=1, p1='./', p2='@assets' img.src=require(`./assets/img${number}.jpg`)//正确 img.src=require(`@assets/img${number}.jpg`)//正确 img.src=require(`${p1}assets/img${number}.jpg`)//正确 img.src=require(`${p2}/img${number}.jpg`)//错误

我也不知道这个是bug还是什么鬼了,有了解的大佬可以说下

4.hash和history模式

应该都知道,即#/a/b/c这样的hash模式中,html和js的./a.jpg均为。而这样的history模式中,html和js的./a.jpg均为,此时如果设置publicPath: './',那么请注意前面提到过css中./是以css文件所在目录为起点的,而loader会把html的标签的src、css的url函数的路径统一处理,此时可能会由于html、css的当前目录./差异导致某一方找不到图片。

解决方案简单,history模式时publicPath不要用相对路径、html或css其中一方手动注意代码写法绕开loader的处理即可,逻辑搞清即可,处理方法多样。

5.常见问题

不了解@vue/cli项目中file-loader的选项设置、不了解webpack各模板中如何间接设置file-loader的选项设置。
解决靠自己了,或者右转百度,说不定直接抄过来给file-loader设置publicPath: './'恰好对上项目结构而解决问题

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/16803a8ca81e673e81a3899940fcb170.html