静态资源的动态访问（vite） [2023-03-31]

视频地址

关键信息

• vitejs vite 引用动态资源的解释
• URL mdn 的 URL 解释
• import.meta.url 模块的基本 URL。也可以是外部脚本的 URL，还可以是内联脚本所属文档的 URL

方式

1. 一个一个引入，然后根据判断和使用(需写多次，而且有额外的 js 产物)
2. 通过放入public文件夹中，不参与打包，直接引用(丢失文件指纹，可能因为缓存影响后续更换文件)
3. 使用URL类和import.meta.url在 vite 中动态引入(本例)

效果

第一张第二张第三张第四张

查看代码

<template>
  <div>
    <a-radio-group
      style="margin-bottom: 16px"
      v-model:value="select"
      button-style="solid"
    >
      <a-radio-button :value="1">第一张</a-radio-button>
      <a-radio-button :value="2">第二张</a-radio-button>
      <a-radio-button :value="3">第三张</a-radio-button>
      <a-radio-button :value="4">第四张</a-radio-button>
    </a-radio-group>
    <img :src="imgUrl" alt="" />
  </div>
</template>
<script lang="ts" setup>
import { computed, ref } from 'vue'

const select = ref(1)
const imgUrl = computed(() => {
  const url = new URL(`./assets/${select.value}.jpg`, import.meta.url)
  console.log('[ import.meta.url, url ]', import.meta.url, url)
  return url.pathname
})
</script>