前言
这篇笔记是对渡一教育网课的知识点总结,源视频 静态资源的动态访问【渡一教育】 。
静态资源与打包规则
Vite脚手架在打包代码的时候,会把源代码里对于静态资源的访问路径转换为打包后静态资源文件的路径。主要的区别是文件指纹,即打包后的文件会带上一个hash值,用于区分不同版本的文件。
文件指纹的作用:
客户端会缓存文件。当前端项目更新之后,重新打包、部署,由于文件指纹的存在,客户端检测到文件名不同,则会下载新版的文件。如果没有文件指纹,且新旧版文件名一致,客户端会读缓存,而不能及时地拿到新版文件。
动态访问静态资源
动态访问静态资源通常导致读取不到文件,因为源代码中使用的路径是src
中的,而打包之后静态资源带上了文件指纹,代码中的路径却没有随之改变。
如下情景属于对静态资源的动态访问,也就是说使用了插值语法,而变量值只有在代码执行中才被确定:
css
中的background-image: url()
使用v-bind
动态地绑定一张图片的路径;template
中节点的style
,在background-image:url()
使用插值语法;img
节点的src
属性使用动态绑定传递图片路径。
方法一:直接导入
import img1 from './assets/1.jpg';
import img2 from './assets/2.jpg';
...
const imgName = ref('');
function handleChange(val){
if(val === 1){
imgName.value = img1;
}else if(...){
...
}
}
<img :src="imgName" />
将所有可能用到的图片都导入,并配合if
语句实现动态切换。
缺点:
- 代码臃肿,难以维护。
方法二:静态资源转移到Public目录
转移到public
目录的静态资源文件会原封不动地被打包到dist
文件夹中,不用担心文件名发生变化,在源代码中直接使用绝对路径访问静态资源即可:/assets/1.jpg
。
但缺点就是失去了文件指纹带来的好处,后期如果静态资源被替换了,但是文件名没变,客户端仍读取缓存,无法及时获取最新版的静态资源。
方法三:动态导入
const imgName = ref('');
const url = ref('');
watchEffect(async()=>{
const module = await import('./assets/${imgName.value}.jpg');
console.log(module);
// ...后续操作
});
Vite脚手架在静态分析代码的时候,读取到动态导入import()
,且内部是模板字符串,只有一部分内容是动态的,那么Vite会自动将符合./assets/*.jpg
路径格式的静态资源全部进行打包。
在打包的时候,不仅会打包所有符合情况的静态资源,还会打包出对应的.js
文件。import()
语句实际上是导入.js
文件,而.js
文件又默认导出打包后的静态资源文件路径。
缺点:
- 打包结果多出许多
.js
文件; - 异步导入。
方法四:URL构造函数
使用计算属性computed
和URL
。
const url = computed(()=>{
const obj = new URL(`./assets/${imgName.value}.jpg`, import.meta.url);
return obj.pathname;
});
URL传入两个参数:1. 文件路径;2. 基准路径。
返回URL实例对象的pathname
属性,即是打包后的文件路径。
<div :style="{backgroundImage: url(url)}">
</div>
原理:
单文件组件在进行打包的时候,会分析以下内容:
<img>
标签的src
属性;css
的background-image
属性的url()
函数;
1和2:如果是静态的,则会进行路径转换。
import()
;new URL();
3和4:可以是动态的,但是只能是某一个部分是动态的。通常是模板字符串。这种情况下会把指定文件夹下面的指定格式的文件全部打包,并进行路径转换。3会生成额外的.js
文件,4不会。
总结
以上的方法中,使用URL的方法是最优的。
- 支持动态导入;
- 保留文件指纹;
- 不会产生额外的
.js
文件; - 同步代码。
1.本站内容仅供参考,不作为任何法律依据。用户在使用本站内容时,应自行判断其真实性、准确性和完整性,并承担相应风险。
2.本站部分内容来源于互联网,仅用于交流学习研究知识,若侵犯了您的合法权益,请及时邮件或站内私信与本站联系,我们将尽快予以处理。
3.本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
4.根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬。”您需知晓本站所有内容资源均来源于网络,仅供用户交流学习与研究使用,版权归属原版权方所有,版权争议与本站无关,用户本人下载后不能用作商业或非法用途,需在24个小时之内从您的电脑中彻底删除上述内容,否则后果均由用户承担责任;如果您访问和下载此文件,表示您同意只将此文件用于参考、学习而非其他用途,否则一切后果请您自行承担,如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。
5.本站是非经营性个人站点,所有软件信息均来自网络,所有资源仅供学习参考研究目的,并不贩卖软件,不存在任何商业目的及用途
暂无评论内容