深入浅出vue图片路径的实现
基础
1.webpack打包本质
本质就是nodejs去执行webpack脚本，由webpack脚本对项目各个文件进行必要的编译(通俗而言即字符串处理)，再输出到某个目录
2.importfrom和require
webpack相关脚本中的require和我们前端js文件中使用的require函数不是一回事，它的require是nodejs的关键字。
而前端js文件中，使用到的require在编译时相当于一个webpack定义的关键字，运行时则是webpack提供的一个函数。主要能力有：完成导入，参数可以省略部分后缀名(需要配置)、是目录时导入该目录下的index.js、能够使用别名(alias，需要配置)、导入图片(实际导入为base64编码后的字符串)，通过编译时提供信息给各个loader处理以获得各种加载导入功能。importfrom是webpack提供的语法糖，可当作是constxx=require(xxxx)的组合。
3.webpack模块化处理解析配置
即webpack的resolve配置：解析(resolve)
resolve:{
extensions:['.js','.vue','.json'],
alias:{
'@':resolve('src'),//此resolve通常是外面定义的一个nodejs的函数，用于生成绝对路径
'@assets':resolve('src/assets')
}
},
上面require提到的别名、可省略扩展名在这里配置。
至于require函数中的路径参数，具体的解析法则如下:webpack如何解析代码模块路径
1.解析相对路径
查找相对当前模块的路径下是否有对应文件或文件夹
是文件则直接加载
是文件夹则继续查找文件夹下的package.json文件
有package.json文件则按照文件中main字段的文件名来查找文件
无package.json或者无main字段则查找index.js文件.
2.解析模块名
查找当前文件目录下，父级目录及以上目录下的node_modules文件夹，看是否有对应名称的模块
3.解析绝对路径
直接查找对应路径的文件
正文
1.图片处理及路径转换
一般由url-loader和file-loader处理。
url-loader
这个简单，把小图片转换成base64编码并返回该base64编码的字符串。即js代码varjpg=require('./assets/a.jpg')中，如果编译时能找到该图片且该图片大小小于规定值，那么url-loader返回该图片的base64编码，变量jpg的值将会是该图片的base64编码。
file-loader
file-loader将处理url-loader没处理的那些大图片，它会把图片复制到指定目录并返回publicURL(参见file-loader文档)，代表编译后运行时该图片的url路径字符串。即js代码varjpg=require('./assets/b.jpg')中，如果编译时能找到该图片，那么jpg的值将会是/img/b.jpg(具体取决于配置)
当前目录./的差异
注意css和js、html的当前路径不一致。css的./是指该css文件所在路径，而js、html中的./是指浏览器当前地址栏的url的路径目录。
2.html、js、css的处理
js中使用require函数就行，这里谈一下html和css中的处理。
html中，由vue-loader提供处理(语法糖)。其默认选项下，会把video、img、source标签的src属性放入require函数并把结果替换到原位置。也就是:vue-loader提取这些标签src属性->require函数->file-loader或url-loader处理->使用返回值进行替换。类似的，可以右转百度搜索vue-loadertransformToRequire这个东西，你可以扩展它让其他标签的属性同样拥有该语法糖。
css中，由css-loader提供处理。类似于上面的html，css-loader会把url(./assets/b.jpg)给处理成url(/img/b.jpg)，同样通过require函数获取处理结果。
注意，在html和css中，绝对路径的写法编译时将不被处理(loader判断)，即url(/assets/b.jpg)编译后不变。而js中require('/assets/b.jpg')编译时将被认为是打包本地磁盘中/assets/b.jpg文件，不存在时将编译报错。
3.进阶：别名的使用
即上面提到的webpack模块化处理，js中@/assets/a.jpg这种。
html中：可直接使用，也可使用~指示webpack这是一个模块路径，即src='@/assets/a.jpg'或src='~@/assets/a.jpg'都是可行的
css中，必须使用~指示webpack这是一个模块路径，即url(~@/assets/b.jpg)
js中，不用写~，webpack一定对其使用模块路径解析。
同时注意，需要把别名字符串的部分直接包含在参数中。即
letnumber=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模式
应该都知道，即http://localhost/#/a/b/c这样的hash模式中，html和js的./a.jpg均为http://localhost/a.jpg。而http://localhost/a/b/c这样的history模式中，html和js的./a.jpg均为http://localhost/a/b/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:'./'恰好对上项目结构而解决问题
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。