前端静态资源的动态访问

静态资源打包规则

Vite脚手架在打包代码的时候，会把源代码里对于静态资源的访问路径转换为打包后静态资源文件的路径。主要的区别是文件指纹，即打包后的文件会带上一个hash值，用于区分不同版本的文件。

文件指纹的作用
当前端项目更新之后，重新打包、部署，由于文件指纹的存在，客户端检测到文件名不同，则会下载新版的文件。如果没有文件指纹，且新旧版文件名一致，客户端会读缓存，而不能及时地拿到新版文件。

动态访问静态资源
动态访问静态资源通常导致读取不到文件，因为源代码中使用的路径是src，而打包之后静态资源带上了文件指纹，代码中的路径却没有随之改变。

如下情景属于对静态资源的动态访问，也就是说使用了插值语法，而变量值只有在代码执行中才被确定。

1. css中的background-image: url();使用v-bind动态地绑定一张图片的路径；
2. template中节点的style，在background-image:url();使用插值语法；
3. img节点的src属性使用动态绑定传递图片路径。

 解决方案

一.直接导入

将所有可能用到的图片都直接导入，使用即可。

import img2 from '@/src/images/2.jpg';

二.将静态资存放在public目录中

存储在public目录的静态资源文件会原封不动地被打包到dist文件夹中，不用担心文件名发生变化，在源代码中直接使用绝对路径访问静态资源即可

三.动态导入 

const path = ref('')
const handleChange = (val) => {  
  import(`./assets/${val}.jpg`).then(res=>{
    path.value = res.default
  })
}

//使用async await
 const res = await import(`./assets/${val}.jpg`);
 console.log(res);

 四.URL构造函数

使用计算属性computed实现

const url = computed(()=>{
    const obj = new URL(`./assets/${imgName.value}.jpg`, import.meta.url);
    
    return obj.pathname;
});


<div :style="{backgroundImage: url(url)}"></div>