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

基础

1.webpack打包本质

本质就是nodejs去执行webpack脚本，由webpack脚本对项目各个文件进行必要的编译(通俗而言即字符串处理)，再输出到某个目录

2.import from 和require

webpack相关脚本中的require和我们前端js文件中使用的require函数不是一回事，它的require是nodejs的关键字。

而前端js文件中，使用到的require在编译时相当于一个webpack定义的关键字，运行时则是webpack提供的一个函数。主要能力有：完成导入，参数可以省略部分后缀名(需要配置)、是目录时导入该目录下的index.js、能够使用别名(alias，需要配置)、导入图片(实际导入为base64编码后的字符串)，通过编译时提供信息给各个loader处理以获得各种加载导入功能。import from是webpack提供的语法糖，可当作是const xx=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代码var jpg=require('./assets/a.jpg')中，如果编译时能找到该图片且该图片大小小于规定值，那么url-loader返回该图片的base64编码，变量jpg的值将会是该图片的base64编码。

file-loader

file-loader将处理url-loader没处理的那些大图片，它会把图片复制到指定目录并返回public URL(参见file-loader文档)，代表编译后运行时该图片的url路径字符串。即js代码var jpg=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-loader transformToRequire 这个东西，你可以扩展它让其他标签的属性同样拥有该语法糖。

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一定对其使用模块路径解析。

同时注意，需要把别名字符串的部分直接包含在参数中。即

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模式

应该都知道，即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: './'恰好对上项目结构而解决问题