Vue中引入静态资源的几种方式

最近修改一些老项目,好多组件里面引入图片的方式不太一样,总感觉自己没有好好总结过,今天有时间参考了几篇帖子,就总结一下;

在总结之前看了一下vue-cli的文档,突然感觉之前可能是我忽略它了基本没有看过,官方文档这块写的清清楚楚,还是应该多看文档,天天看掘金、简书这些碎片化知识也不太好;

Vue中静态资源引入机制


Vue.js关于静态资源的官方文档

静态资源可以通过两种方式进行处理:

  1. 在 JavaScript 被导入或在 template/CSS 中被引用。
    这类引用会被 webpack 处理。诸如background: url(...)CSS @import的资源, 都会被解析为一个模块依赖。
    例如,url(./image.png)会被翻译为require(’./image.png’)

  2. 放置在public目录下或通过绝对路径被引用。
    这类资源将会直接被拷贝,而不会经过 webpack 的处理,你需要通过绝对路径来引用它们。

webpack中的require解析

首先明确一点,在项目中的webpack.config.js等项目配置文件中使用的require属于nodejs范畴,而进入index.js后,加载的组件中的require都属于webpack的解析范畴。

先聊聊webpack中require的用法。

// 代码1 报错
let url = "@/assets/images/carousel/logo.svg"
require(url)    // require单纯传了一个变量

// 代码2 正确
let url = "logo.svg"
require("@/assets/images/carousel/"+url); // require里面虽然是变量但是增加了前缀,让计算机更快找到

页面修改webpack流程:

webpack进行编译
等待编译完
进行工程打包
打包正确
热加载运行
刷新页面

如果require中传入的是个变量,它有可能是计算机系统中的任何目录下的任何文件,那么在打包静态资源时它有可能会将你的电脑整个磁盘遍历一遍(它很傻); 如上代码1只传了个变量。
因此需要给出在大致路径(如上代码2),这样才能精确的将那个路径下的对应文件打包,然后在代码运行时,直接用对应文件名生成正则匹配(因为打包后的文件,可能有hash值。不能直接查文件名),找到后,加载到代码中。所以,尽可能详细的指定require中的路径,然后拼接变量。

webpack将项目中的静态资源编译打包后,生成的路径已经不是原来的那个路径了。

src/assets/image/logo.png
// 编译后可能变成 
dist/public/image/logo.1d997ea3.png

通过require("src/assets/image/logo.png"),
会自动找到并加载 dist/public/image/logo.1d997ea3.png文件

关于打包完不是原来的路径那是 file-loader 的作用,这里不细说可以看一下,file-loader和url-loader的讲解。

解析介绍

这里主要用到 vue-loader,vue-loader 在编译单文件组件中的 块时,它也会将所有遇到的资源 URL 转换为 webpack 模块请求。(这样我们就没必要手动调用require了,而是交给vue-loader处理了)
vue-loader默认可以处理的标签/特性的组合如下: (不包括style)

// 面对下面的标签组合,vue-loader会自动进行资源url的转换。
{
     
  video: ['src', 'poster'],
  img: 'src',   //即img元素上的src属性
  source: 'src',  //source元素上的src属性
  image: 'xlink:href'
}

转换规则(官方文档有介绍)

部分的路径处理

  1. 如果路径是绝对路径,会被原样保留。如 /src/assets/image/login/title.png
//代码
<template>
   <img src="/src/assets/image/login/title.png" alt="">
</template>

//渲染后html页面
<img data-v-70c98a68="" src="/src/assets/image/login/title.png" alt="">
// 当然这个图片是无法展示的,因为编译后title.png已不在src/assets/image/login下了 

这个图片是无法展示的,因为编译后title.png已不在src/assets/image/login下了 ,关于public文件夹在下文会有介绍

  1. 如果路径以 . 开头,将会被看作相对的模块依赖。如 ./title.png
//代码
<img src="./titlea.png" alt="">

//渲染后html页面
<img data-v-70c98a68="" src="/static/img/titlea.1e9fa570.png" alt="">

❌错误的引入方式,使用 :src 调用了 v-bind 指令处理其内容,相对路径不会被webpack的 file-loader 处理。

<img :src="'./assets/images/02.jpg'" alt=""> // ×
// 编译后:
<img src="./assets/images/02.jpg" alt="">
  1. 如果路径以 @ 开头,也会被看作模块依赖。如果你的 webpack 配置中给 @ 配置了 alias,这就很有用了。所有 vue-cli 创建的项目都默认配置了将 @ 指向 /src
//代码
<img src="@/assets/image/login/title.png" alt="">

//渲染后html页面
<img data-v-70c98a68="" src="/static/img/title.1e9fa570.png" alt="">
  1. 如果路径以 ~ 开头,其后的部分将会被看作模块依赖,既可以加载含有别名的静态资源,又可以加载node-modules中的资源。如
// 如果用别名的静态资源必须加@否则报一下错误。
//代码 必须有@否则报错,@是别名
<img src="~@/assets/image/login/title.png" alt="">
//渲染后html页面
<img data-v-70c98a68="" src="/static/img/title.1e9fa570.png" alt="">


//代码
<img src="~[npm包名]/xxx/logo.png" alt="">
//渲染后的html页面
<img data-v-70c98a68="" src="/static/img/logo.2f53e458.png" alt="">