# 小小 vite,坑倒不少

首先先说遇到的问题

1.vite 对静态资源的打包方式是什么样

2.vite 图片打包,是不是非得 base64 转码后才能看见

3.vite 为什么不支持 require 写法

# 打包方式

https://vitejs.bootcss.com/guide/assets.html#importing-asset-as-url

先上链接

image-20220928185118931

我们可以知道,确实,图片资源在 vite 中,会被处理为散列名文件名,图片也并不是只有在 base64 下才会被看见 -- 因为都会被处理为散列文件名然后被展示而已,而被 base64 转码的图片仅仅只是其大小小于特定的限定值而已。

# 为什么不支持 require

不支持就是不支持,因为 require 写法在其实是 webpack 本身特有的解析文件方式,vite 没有相关特性。

但是在 vite 的官方文档中给出了解决方法。

针对我这次遇到的图片引入问题,官方给出的解决方法是采用使用 ESM 原生功能 import.meta.url

image-20220928191033934

更新于 阅读次数

请我喝[茶]~( ̄▽ ̄)~*

神烦大眼怪 微信支付

微信支付

神烦大眼怪 支付宝

支付宝

神烦大眼怪 贝宝

贝宝