用 Vitejs 打包 Vue3 项目, “你这打包的文件夹里面都没有图片呢?” 我一看还真是!

出现问题

最近创建了个小项目, 用了几个小图标, 仓促打了个包放到测试环境, 发现图片没有显示出来。 第一时间当然就想到了图片路径问题呗

// 原来的写法
<template>
    <van-icon name="/src/assets/images/workbench_02.png" size="52" />
</template>

修改成

<template>
    <van-icon :name="workbench_02" size="52" />
</template>

<script setup>
    import workbench_02 from '@/assets/images/workbench_02.png';
</script>

按照正常流程, 这个问题到此就解决了。

如果是因为图片路径不显示图片的问题, 参考下面的写法就能解决了

ViteJs + Vue3 项目图片路径参考写法

// 1
<script setup>
import workbench_02 from '@/assets/images/workbench_02.png';
</script>

// 2
<template>
    <img src="/src/assets/images/workbench_01.png" />
    <img src="../../assets/images/workbench_01.png" />
</template>

// 3
<style lang="scss" scoped>
.xxx {
    background: url('/src/assets/images/arrow_back.png') no-repeat center center;
}

// 4 我没用过
<script setup>
    function getImageUrl(name) { return new URL(`./dir/${name}.png`, import.meta.url).href }
</script>
</style>

第4种写法来源于ViteJs官方文档, 我没有在项目中用过

这时候

同事来了一句“你这打包的文件夹里面都没有图片呢?” 我一看还真是!

本来问题已经解决了, 由于同事发现这个问题, 我修改路径后, 并没有打包测试, 而是把图片不显示的问题归咎于“打包的文件夹里面都没有图片”，自此陷入了误区。

打包的文件夹里面都没有图片

打包的文件夹里为什么没有图片?

我左思右想, 冥思苦想, 把 vite.config.js 看了一遍又一遍, 和另一个同胞项目的配置对比了一茬又一茬;

通过大量的搜索后, 找到了一个类似的问题, segmentfault.com/q/101000001…

根据依葫芦画瓢原理, 我在ViteJs官方文档找到了原因 assetsInlineLimit,

我这个是小项目, 只有那么几个图标, 大小都小于 4kb, 所以打包的时候图片被转成 base64 格式放到 js 文件里面去了, 所以打包文件夹里没有看到我的图片，

把 assetsInlineLimit 设置为 0 可以完全禁用此项

 build: {
    assetsInlineLimit: 0,
    // ...
  },

当然了，没必要配置这个参数, 图片不显示的问题还是图片路径， 图片路径是正确的, 是可以正常显示图片的。知道“打包的文件夹里面为什么没有图片”就可以了