太原网站建设价格低,上弘科技网站建设,织梦自定义表单做网站在线留言,旅游网站代码htmlMENU 静态资源与打包规则动态访问静态资源直接导入将静态资存放在public目录中动态导入URL构造函数结束语实践与坑附文 静态资源与打包规则 介绍 Vite脚手架在打包代码的时候#xff0c;会把源代码里对于静态资源的访问路径转换为打包后静态资源文件的路径。主要的区别是文件指… MENU 静态资源与打包规则动态访问静态资源直接导入将静态资存放在public目录中动态导入URL构造函数结束语实践与坑附文 静态资源与打包规则 介绍 Vite脚手架在打包代码的时候会把源代码里对于静态资源的访问路径转换为打包后静态资源文件的路径。主要的区别是文件指纹即打包后的文件会带上一个hash值用于区分不同版本的文件。 文件指纹的作用 当前端项目更新之后重新打包、部署由于文件指纹的存在客户端检测到文件名不同则会下载新版的文件。如果没有文件指纹且新旧版文件名一致客户端会读缓存而不能及时地拿到新版文件。 动态访问静态资源 动态访问静态资源通常导致读取不到文件因为源代码中使用的路径是src而打包之后静态资源带上了文件指纹代码中的路径却没有随之改变。 如下情景属于对静态资源的动态访问也就是说使用了插值语法而变量值只有在代码执行中才被确定。 1、css中的background-image: url();使用v-bind动态地绑定一张图片的路径 2、template中节点的style在background-image:url();使用插值语法 3、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(val 2) {imgName.value img2;}
}将所有可能用到的图片都导入并配合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传入两个参数文件路径和基准路径。 返回URL实例对象的pathname属性即是打包后的文件路径。 div :style{backgroundImage: url(url)}/div原理 单文件组件在进行打包的时候会分析内容。 img元素和url函数 1、img标签的src属性 2、css的background-image属性的url()函数 如果是静态的则会进行路径转换。 import()和new URL() 只能是某一个部分是动态通常是模板字符串。这种情况下会把指定文件夹下面的指定格式的文件全部打包并进行路径转换。import()会生成额外的.js文件new URL()不会。 结束语 以上的方法中使用URL的方法最优。 支持动态导入 保留文件指纹 不会产生额外的.js文件 同步代码。 实践与坑 待更新… 附文 待更新…
