Vite+React项目Render部署失败：Rollup无法解析图片导入

背景 #

我有一个基于Vite的React项目，会偶尔更换展示的图片，项目部署在Render平台，每次向仓库主分支推送代码时会自动部署。

问题 #

最近一次部署失败，错误日志如下：

Aug 15 01:07:07 PM  > tsc && vite build
Aug 15 01:07:07 PM  
Aug 15 01:07:10 PM  vite v4.2.1 building for production...
Aug 15 01:07:10 PM  transforming...
Aug 15 01:07:11 PM  ✓ 28 modules transformed.
Aug 15 01:07:11 PM  ✓ built in 1.13s
Aug 15 01:07:11 PM  [vite]: Rollup failed to resolve import "/assets/projects/privateGarden.jpg" from "/opt/render/project/src/src/components/Projects.tsx".
Aug 15 01:07:11 PM  This is most likely unintended because it can break your application at runtime.
Aug 15 01:07:11 PM  If you do want to externalize this module explicitly add it to
Aug 15 01:07:11 PM  `build.rollupOptions.external`
Aug 15 01:07:11 PM  error during build:
Aug 15 01:07:11 PM  Error: [vite]: Rollup failed to resolve import "/assets/projects/privateGarden.jpg" from "/opt/render/project/src/src/components/Projects.tsx".
Aug 15 01:07:11 PM  This is most likely unintended because it can break your application at runtime.
Aug 15 01:07:11 PM  If you do want to externalize this module explicitly add it to
Aug 15 01:07:11 PM  `build.rollupOptions.external`
Aug 15 01:07:11 PM      at onRollupWarning (file:///opt/render/project/src/node_modules/vite/dist/node/chunks/dep-79892de8.js:46368:19)
Aug 15 01:07:11 PM      at onwarn (file:///opt/render/project/src/node_modules/vite/dist/node/chunks/dep-79892de8.js:46138:13)
Aug 15 01:07:11 PM      at Object.onwarn (file:///opt/render/project/src/node_modules/rollup/dist/es/shared/node-entry.js:25171:13)
Aug 15 01:07:11 PM      at ModuleLoader.handleInvalidResolvedId (file:///opt/render/project/src/node_modules/rollup/dist/es/shared/node-entry.js:23806:26)
Aug 15 01:07:11 PM      at file:///opt/render/project/src/node_modules/rollup/dist/es/shared/node-entry.js:23766:26
Aug 15 01:07:11 PM  npm ERR! code ELIFECYCLE
Aug 15 01:07:11 PM  npm ERR! errno 1
Aug 15 01:07:11 PM  npm ERR! portfolio-ido-band@0.0.0 build: `tsc && vite build`
Aug 15 01:07:11 PM  npm ERR! Exit status 1
Aug 15 01:07:11 PM  npm ERR!
Aug 15 01:07:11 PM  npm ERR! Failed at the portfolio-ido-band@0.0.0 build script.
Aug 15 01:07:11 PM  npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
Aug 15 01:07:11 PM  
Aug 15 01:07:11 PM  npm ERR! A complete log of this run can be found in:
Aug 15 01:07:11 PM  npm ERR!     /opt/render/.cache/_logs/2023-08-15T10_07_11_518Z-debug.log
Aug 15 01:07:11 PM  ==> Build failed 😞

已尝试操作 #

• 仅更换了图片文件，更新了导入路径以匹配新文件名（变量名未变）
• 项目本地运行正常，执行npm run build无报错，但打开dist目录下的index.html显示空白页
• GitHub最近一次提交中已看到新图片标记为“Added”

代码说明 #

图片文件位于项目根目录下的public文件夹中，当前导入方式：

import pgImg from '/assets/projects/privateGarden.jpg'

使用方式：

<img src={pgImg} />

解决方案 #

1. 修正public目录资源的引用逻辑 #

Vite中public目录下的资源无需通过import导入，直接在src属性中使用绝对路径即可。因为public目录的内容会被原样复制到dist根目录，正确写法为：

<img src="/assets/projects/privateGarden.jpg" />

删除对应的import语句即可。

2. 检查文件名大小写一致性 #

Render部署环境为Linux，文件名严格区分大小写。确认本地图片文件名的大小写（比如privateGarden.jpg和PrivateGarden.jpg）与代码中书写的完全一致，避免本地Windows/macOS不区分大小写导致的隐藏问题。

3. 验证本地构建后的资源完整性 #

执行npm run build后，检查dist目录下是否存在assets/projects/privateGarden.jpg文件：

• 若不存在，确认图片是否确实放在项目根目录的public/assets/projects路径下，层级是否正确
• 检查vite.config.ts中是否修改过publicDir配置，导致public目录被自定义

4. 清理Render构建缓存 #

进入Render项目的部署设置页面，手动清理构建缓存后重新触发部署，避免旧缓存资源干扰。

内容的提问来源于stack exchange，提问作者IdoBa