在 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, }, });
