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

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

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

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

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

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