前端 JS 经典：统一 Vite 中图片转换逻辑

在 Vue + Vite 项目中有这样一段代码如下，引入了两个图片，一大一小。然后 console 出来引入结果。

import bigImg from "./assets/big.png";
import smallImg from "./assets/small.png";console.log(bigImg);
console.log(smallImg);

在开发环境中 npm run dev，打印结果如下：

/src/assets/big.png
/src/assets/small.png

在生产环境再看，先打包 npm run build，然后本地预览 npm run preview。打印结果如下：

/assets/big-xxxxxx.png
data:image/png;base64,xxxxxx....

这就有区别了，第一个图片是路径，第二小图变成 base64。这个变化有啥问题呢，没啥问题，这是 Vite 做的优化，当它觉得一个图片尺寸很小的时候，没有必要进行网络请求了，直接整一个 dataurl 出来。

现在有个需求，是需要在开发环境下和生产环境下，使它们的路径格式要一致。

有两种方式：第一种以开发环境为主，将 vite 的这种打包优化禁止掉。将 vite.config.js 中的 assetsInlineLimit 设置为 0 就可以了。

export default defineConfig({plugins: [vue()],build: {assetsInlineLimit: 0,},
});

但是这样是不合理的，因为优化没了。换一种方法，以生产环境为主，通过自定义插件解决。这样在开发环境下，图片如果小于临界值，就会转化为 base64。

import fs from "ndoe:fs";const MyPlugin = (limit = 4096) => {return {name: "my-plugin",async transform(code, id) {if (process.env.NODE_ENV !== "devlopment") {return;}if (!id.endsWith(".png")) {return;}const stat = await fs.promises.stat(id);if (stat > limit) {return;}const buffer = await fs.promises.readFile(id);const base64 = buffer.toString("base64");const dataUrl = `data:image/png;base64,${base64}`;return {code: `export default "${dataUrl}"`,};},};
};export default defineConfig({plugins: [vue(), MyPlugin()],build: {assetsInlineLimit: 4096,},
});