vite 库模式打包后 图片资源找不到

[itwmike]

// 组件库 的 vite.config.ts

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import checker from 'vite-plugin-checker'
import { resolve } from 'path'
import dts from 'vite-plugin-dts'
import i18nBuildPlugin from './plugins/localesPlugin'

// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
vueJsx(),
checker({
typescript: true,
// vueTsc: true,
overlay: {
initialIsOpen: false
}
}),
dts({
pathsToAliases: true,
outDir: ['./dist/es', './dist/lib'],
tsconfigPath: 'tsconfig.app.json',
exclude: ['vite.config.ts', 'vite.package.config.ts', './src', './plugins']
})
// i18nBuildPlugin()
],
//全局引入
css: {
preprocessorOptions: {
scss: {
javascriptEnabled: true
}
}
},
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
'@packages': fileURLToPath(new URL('./packages/src', import.meta.url))
}
},
build: {
lib: {
entry: resolve(__dirname, 'packages/src/index.ts')
},
rollupOptions: {
// 确保外部化处理那些你不想打包进库的依赖
external: ['vue', 'pinia', 'vue-router', 'axios'],
output: [
{
//打包格式
format: 'es',
//打包后文件名
entryFileNames: '[name].js',
//让打包目录和我们目录对应
preserveModules: true,
exports: 'named',
//配置打包根目录
dir: './dist/es',
// 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
globals: {
vue: 'Vue'
}
},
{
//打包格式
format: 'umd',
name: 'xxx',
//打包后文件名
entryFileNames: '[name].umd.js',
//让打包目录和我们目录对应
// preserveModules: true,
exports: 'named',
//配置打包根目录
dir: './dist/lib',
// 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
globals: {
vue: 'Vue'
}
}
]
}
}
})

组件库中引用是这样写的：

项目中使用的时候报找不到图片：

[itwmike]

已解决

[billkang]

如何解决的，我也遇到这个问题了