Vite Library Mode下如何将打包后的图片资源引入消费项目？

哥们，我太懂你踩的这个坑了！Vite在构建Vue3库的时候，对public目录下的资源处理逻辑和普通项目不一样——它默认会把这些资源的路径保留成绝对路径，结果你的消费项目加载组件时，浏览器直接跑去自己的根目录找/images/icons/cheveron-left.svg，完全忽略了这些图片其实在你的库的dist文件夹里。

给你几个靠谱的解决办法，按需选就行：

1. 最推荐：把图片作为模块导入（不用public目录） #

别再直接写绝对路径引用public里的图片了，改成模块导入的方式，Vite会自动帮你处理资源路径，打包时生成正确的相对路径，消费项目导入后就能正常加载。

举个例子，把图片放到组件目录下（比如src/components/images/icons/），然后在组件里这么写：

<template>
  <img :src="cheveronLeftIcon" alt="返回" />
</template>

<script setup>
// 路径根据你的实际文件位置调整
import cheveronLeftIcon from './images/icons/cheveron-left.svg'
</script>

这样打包的时候，Vite会把图片处理成库的一部分，自动生成正确的资源路径，消费项目根本不用操心资源位置的问题。

2. 必须用public资源？用动态URL生成路径 #

如果你非要把图片放在public目录里，那可以用import.meta.url来动态计算图片的绝对路径，这样不管你的库被部署到哪里，路径都是基于库本身的位置生成的，不会跑到消费项目的根目录。

组件里这么写：

<template>
  <img :src="cheveronLeftIconUrl" alt="返回" />
</template>

<script setup>
// 这里的路径是相对于库的dist根目录的，和你原来的写法一致
const cheveronLeftIconUrl = new URL('/images/icons/cheveron-left.svg', import.meta.url).href
</script>

同时记得在你的库的vite.config.js里，把打包的公共路径设为相对路径，避免硬编码绝对路径：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: 'src/index.js', // 你的库入口文件
      name: 'YourVueLibrary',
      fileName: (format) => `your-vue-library.${format}.js`
    },
    rollupOptions: {
      external: ['vue'], // 把Vue设为外部依赖，避免打包进去
      output: {
        globals: {
          vue: 'Vue'
        },
        publicPath: './' // 设为相对路径
      }
    }
  }
})

3. 小图标直接打包进JS（Base64） #

如果你的图片都是小图标（比如几KB的SVG），可以让Vite把它们转成Base64编码直接打包进JS里，这样连单独的图片文件都不用了，彻底解决路径问题。

修改vite.config.js里的资源限制：

export default defineConfig({
  build: {
    assetsInlineLimit: 4096, // 4KB以下的图片自动转Base64，可根据需求调整大小
    // 其他库配置...
  }
})

然后用第一种方法的模块导入方式，小图片就会被直接嵌入到JS代码里，消费项目加载时直接就能显示，不用额外请求图片资源。

备注：内容来源于stack exchange，提问作者Kaki Master Of Time