Vite项目中图片路径在打包后显示404怎么办?

UI志敏 阅读 35

我在开发环境用Vite项目中图片路径在打包后显示404怎么办?能正常显示图片,但打包后访问根路径时图片404了。试过改成Vite项目中图片路径在打包后显示404怎么办?还是不行,public目录配置也没问题,这是哪里出错了?

项目结构是这样的:src/里放代码,public/放静态资源。打包生成的dist/里确实有logo.png,但访问/时控制台报404,路径显示成了/logo.png

有没有可能跟路由模式有关?我用的是Vue Router history模式,但其他静态文件比如favicon.ico也能正常加载…

我来解答 赞 7 收藏
二维码
手机扫码查看
2 条解答
迷人的统元
最简单的办法,在 vite.config.js 里加一行:

export default defineConfig({
base: './',
})


这样打包时资源路径会以相对路径处理,图片就能正确加载了。
点赞 3
2026-02-03 18:08
宇文兴敏
history模式确实容易踩这个坑。我之前这样搞的,在public目录里的图片,打包后路径会变,建议用import方式引入试试。

如果非要放public,可以试试改vite.config.js,加个base配置:
export default {
base: './'
}


实在不行就把图片丢src/assets里,用new URL()加载,最稳妥。
点赞 7
2026-01-30 15:55