Vite项目中图片路径在打包后显示404怎么办? UI志敏 提问于 2026-01-28 12:07:30 阅读 35 工具 我在开发环境用能正常显示图片,但打包后访问根路径时图片404了。试过改成还是不行,public目录配置也没问题,这是哪里出错了? 项目结构是这样的:src/里放代码,public/放静态资源。打包生成的dist/里确实有logo.png,但访问/时控制台报404,路径显示成了/logo.png。 有没有可能跟路由模式有关?我用的是Vue Router history模式,但其他静态文件比如favicon.ico也能正常加载… Vite开发工具插件开发 我来解答 赞 7 收藏 分享 生成中... 手机扫码查看 复制链接 生成海报 反馈 发表解答 您需要先 登录/注册 才能发表解答 2 条解答 迷人的统元 Lv1 最简单的办法,在 vite.config.js 里加一行: export default defineConfig({ base: './', }) 这样打包时资源路径会以相对路径处理,图片就能正确加载了。 回复 点赞 3 2026-02-03 18:08 宇文兴敏 Lv1 history模式确实容易踩这个坑。我之前这样搞的,在public目录里的图片,打包后路径会变,建议用import方式引入试试。 如果非要放public,可以试试改vite.config.js,加个base配置: export default { base: './' } 实在不行就把图片丢src/assets里,用new URL()加载,最稳妥。 回复 点赞 7 2026-01-30 15:55 加载更多 相关推荐 2 回答 30 浏览 Vite打包后为什么静态资源路径404? 用Vite开发的项目部署到服务器后,图片和字体文件都报404错误,明明在public目录里放了资源,也配置了publicDir: 'public',生产构建后的dist里确实有这些文件,但页面访问时路... 皇甫桂香 优化 2026-02-08 23:20:28 2 回答 19 浏览 Vite+React项目中配置别名后无法导入组件,路径报错怎么办? 在用Vite搭建React项目时,我按文档配置了@别名指向src目录,但导入组件时总提示404错误。比如这样写: // vite.config.js import { defineConfig } f... 迷人的晟华 框架 2026-02-14 19:05:26 1 回答 4 浏览 Vite库模式打包后入口文件路径不对怎么办? 我在用Vite的库模式打包组件库时遇到了问题,配置了build.lib.name为"my-lib",但生成的dist文件夹里只有vendor.js,没有预期的main.js入口文件。查看构建日志没报错... Prog.铭轩 前端 2026-02-19 18:38:24 1 回答 9 浏览 Vite项目使用Sass时提示”Cannot find module ‘sass'”怎么办? 我在Vite项目里新建了一个.sass文件,写了一些嵌套样式后保存时报错,控制台显示:Cannot find module 'sass'。之前按照文档安装了vite-plugin-sass,并在vit... W″春萍 前端 2026-02-17 23:47:22 1 回答 21 浏览 Vite配置Library模式打包后导出的文件无法被其他项目引入怎么办? 我在用Vite的Library模式打包一个工具库时遇到问题,按照文档配置了library选项,但打包生成的umd文件在另一个项目里引入时一直报错:Uncaught TypeError: Cannot ... Air-卫红 前端 2026-02-15 10:24:34 2 回答 53 浏览 Vite配置base选项后静态资源404怎么办? 在用Vite打包生产环境时,我设置了base: '/dist/',但访问页面时图片和CSS都404了。调整过publicDir也没用,控制台报错说资源路径变成了/dist/dist/images/lo... 小敏 工具 2026-02-04 21:09:30 1 回答 43 浏览 Vite项目中配置路径别名后依然报模块找不到错误? 在用Vite搭建新项目时,我按教程配置了路径别名,但导入组件还是报“Cannot find module @/components/MyButton”,折腾了好久没解决。 我的vite.config.... Newb.东景 前端 2026-01-30 19:22:41 2 回答 45 浏览 Vite的manualChunks配置后组件还是单独打包怎么办? 我在用Vite开发React项目时,想通过manualChunks把四个公共组件打包到同一个chunk里,但配置后每个组件还是单独生成了文件... 项目结构是这样的,四个组件分布在不同页面: // v... 丹丹 优化 2026-01-30 16:11:34 1 回答 7 浏览 Vite开发时代理请求到后端,但刷新页面后请求地址变成绝对路径怎么办? 我在用Vite搭建React项目时配置了代理,开发环境访问/api/*都会代理到localhost:3000。但当我直接访问带有路由参数的页面(比如/user/123),刷新后发起的请求变成了http... UI馨予 工具 2026-02-18 19:06:26 2 回答 26 浏览 在Vue项目中选择构建工具时,Webpack和Vite有什么关键区别? 我们在准备迁移一个中型Vue项目时遇到了选型困惑。之前用Webpack打包要等十几秒,但同事说Vite可能更流畅。试过用Vite初始化后热更新确实快,但项目依赖了一些旧版loader,比如vue-lo... 端木爱豪 前端 2026-02-05 14:34:27
vite.config.js里加一行:这样打包时资源路径会以相对路径处理,图片就能正确加载了。
public目录里的图片,打包后路径会变,建议用import方式引入试试。如果非要放
public,可以试试改vite.config.js,加个base配置:实在不行就把图片丢
src/assets里,用new URL()加载,最稳妥。