拥抱 Vite2.0 系列(静态资源处理)

本文详细介绍了Vite2.0中静态资源的处理方式,包括Importing Asset as URL、Explicit URL Imports、Importing Asset as String以及Importing Script as a Worker。在Vite中,静态资产会被解析为公共URL,且在不同环境下有不同的表现。Vue SFC模板中的资产引用会自动转换,同时支持通过assetsInclude选项扩展识别列表。较小的资产会被内联为base64数据url。此外,显式URL导入和字符串导入提供了更多灵活性。公共目录用于存放未引用或需保持文件名不变的资产,它们会被直接复制到dist目录并可通过根路径引用。
摘要由CSDN通过智能技术生成

Importing Asset as URL

导入静态资产时,将返回解析后的公共URL:

import imgUrl from './img.png'
document.getElementById('hero-img').src = imgUrl

例如,在开发阶段,imgUrl将是/img.png,而在生产版本中,它将变成/assets/img.2d8efhg.png。

其行为类似于webpack的文件加载器。区别在于导入既可以使用绝对公共路径(基于开发期间的项目根路径),也可以使用相对路径。

博客
v8worker
05-08 2889
05-06 2869
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值