如何在Vite中处理静态资源？SVG导入失败问题求助

问题根源 #

你把SVG文件放在了public/img/目录下，但尝试用import语句导入——这是错误的用法。Vite对public目录的资源是作为静态资源直接部署的，不属于模块系统的解析范围，所以import无法找到该文件。

两种解决方案 #

方案1：直接使用静态资源路径（推荐） #

不需要import，直接在代码中使用该SVG的静态路径：

// src/resources/articles.ts
const imgUrl = '/img/googlenews.svg';
// 后续使用这个路径即可，比如赋值给img的src

因为你的Vite配置中base: ''，所以路径是相对于项目根目录的/img/googlenews.svg，打包后该文件会被直接复制到dist/img/目录下，路径保持一致。

方案2：将SVG移到src目录下使用import #

如果一定要用import导入，需要把SVG文件从public/img/移到src目录内（比如src/img/googlenews.svg），然后修改导入路径：

// src/resources/articles.ts
import imgUrl from '../img/googlenews.svg';

此时Vite会将该SVG作为模块处理，打包时会按照你vite.config.ts中assetFileNames的规则，输出到dist/img/目录下。

补充说明 #

Vite官方文档中的示例是导入src目录内的图片，所以可以用import；而public目录的资源是为了直接通过URL访问而设计的，不需要经过模块导入流程。

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