vite 动态访问静态资源

vite 脚手架能够自动识别特定静态（不能用 v-bind）的标签路径、css 中的路径，并将静态文件打包到特定目录。

但对于这样的动态路径，vite 处理起来就要麻烦一些。

<img :src="path" />

一般有三种方式。

枚举 import

这个是最容易想到的，但图片特别多的情况下，逐一 import 会很麻烦。

动态导入

const path = ref('')

function clickHandler(val: string) {
  import(`@/assets/imgs/${val}.jpg`).then(res => {
    path.value = res.default;
  });
}

这时候，由于 vite 不知道 val 的具体值，它会将所有可能的文件，全部打包，而且每个图片都对应了一个 js 文件。

URL 对象

通过构造 URL 对象，触发 vite 的静态资源打包机制。

const path = ref('');

function clickHandler(val: string) {
  const url = new URL(`../../../assets/imgs/${val}.jpg`, import.meta.url);
  path.value = url.pathname;
}

这种方式，不会生成额外的 js 文件，只会打包 jpg 图像文件。

这个时候，无法使用 vite 配置文件中 alias，只能使用相对路径来书写，暂不知道是什么原因。