使用vite构建工具时本地静态资源加载失败

使用vite开发时本地静态资源加载失败

在开发项目时遇到在动态绑定本地静态资源的相对路径时加载失败的情况

本地文件存放在static文件夹下，如图所示

此时的图片路径为：

src: '../static/index/slider-1.jpg'

但是发现在页面却无法加载图片，浏览器显示404

当我们将路径写死之后

发现可以正常获取到对应的图片

于是就去vite官网查看静态文件是如何加载的，详见：静态资源处理

官网推荐 ESM 的原生功能 import.meta.url 来暴露处当前模块的URL

我们可以将其封装成一个工具方法

export function getAssetsFile (url: string) {
  return new URL(`../static/index/${url}`, import.meta.url).href
}

此时就可以使用相对路径来获取到图片了