vite静态资源处理，处理vite项目中src和url路径问题

将资源引入为 URL

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

// imgUrl的绝对路径为/img.png
import imgUrl from './img.png'
document.getElementById('hero-img').src = imgUrl
1
2
3

例如，imgUrl 在开发时会是 /img.png，在生产构建后会是 /assets/img.2d8efhg.png。

行为类似于 Webpack 的 file-loader。区别在于导入既可以使用绝对公共路径（基于开发期间的项目根路径），也可以使用相对路径。

• url() 在 CSS 中的引用也以同样的方式处理。
• 如果 Vite 使用了 Vue 插件，Vue SFC 模板中的资源引用都将自动转换为导入。

new URL(url, import.meta.url)

import.meta.url 是一个 ESM 的原生功能，会暴露当前模块的 URL。将它与原生的 URL 构造器 组合使用，在一个 JavaScript 模块中，通过相对路径我们就能得到一个被完整解析的静态资源 URL：

const imgUrl = new URL('./img.png', import.meta.url).href

document.getElementById('hero-img')
1
2