Vite静态资源处理——动态引入图片

单一资源处理

将资源引入为

URL

服务时引入一个静态资源会返回解析后的公共路径：

// 引用import CaseBG from'@/assets/images/20230313144252.png'

导入既可以使用绝对公共路径（基于开发期间的项目根路径），也可以使用相对路径。

// 使用
<img alt='' :src=CaseBG />

vite

生产构建后文件名会哈希，如图：

多个资源处理（动态）

new URL(url, import.meta.url)

import.meta.url 是一个 ESM 的原生功能，会暴露当前模块的 URL。将它与原生的 URL 构造器 组合使用，在一个

JavaScript

模块中，通过相对路径我们就能得到一个被完整解析的静态资源

URL

：

// 引用const CaseBG =newURL('@/assets/images/20230313144252.png',import.meta.url).href

// 使用
<img alt='' :src=CaseBG />

如果想要动态引入图片资源，可以通过字符串模板封装一个方法：

/**
 * 动态引入图片资源
 * @param {String} name 图片名称/路径
 * @returns 图片url
 */exportconstgetImageUrl=(name)=>{returnnewURL(`../assets/images/${name}`,import.meta.url).href
}

需要注意的是：

• 如果 name 想要传路径的话，比如图片资源在 images 下不同的文件夹中，即 home/20230313144252.png，那这个路径就需要传文件后缀。

<img
  alt=""
  :src="getImageUrl('home/20230314145534.png')"
  style="width: 214px; height: 46px;"
/>

写成这样的格式才能正确显示。

• 如果 name 只是传文件名的话，就可以把后缀直接写在封装的方法中：

exportconstgetImage=(name)=>(newURL(`../assets/images/${name}.png`,import.meta.url).href
)

<img
  alt=""
  :src="getImage('20230313094342')"
  style="width: 214px; height: 46px;"
/>

这样的话，就可以省略文件后缀了。

需要注意的是：

在生产构建时，

Vite

才会进行必要的转换保证

URL

在打包和资源哈希后仍指向正确的地址。然而，这个

URL

字符串必须是静态的，这样才好分析。否则代码将被原样保留、因而在

build.target

不支持

import.meta.url

时会导致运行时错误。

两个知识点：

new URL()

创建并返回一个

URL

对象，该

URL

对象引用使用绝对

URL

字符串，相对

URL

字符串和基本

URL

字符串指定的

URL

。

import.meta

import.meta

是一个给

JavaScript

模块暴露特定上下文的元数据属性的对象。它包含了这个模块的信息，比如说这个模块的

URL

。

Public 目录

另外说一下一些特殊情况，可以解决路径问题。
如果有下列这些资源：

• 不会被源码引用（例如 robots.txt）
• 必须保持原有文件名（没有经过 hash）
• 等等一些压根不想引入该资源，只是想得到其 URL。

那么就可以将该资源放在指定的

public

目录中，它应位于项目根目录。该目录中的资源在开发时能直接通过

/

根路径访问到，并且打包时会被完整复制到目标目录的根目录下。

目录默认是

<root>/public

，但可以通过 publicDir 选项 来配置。

请注意：

• 引入 public 中的资源永远应该使用根绝对路径 —— 举个例子，public/icon.png 应该在源码中被引用为 /icon.png。
• public 中的资源不应该被 JavaScript 文件引用。