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: './'恰好对上项目结构而解决问题