React+TypeScript+Vite环境下无法导入SVG的问题求助

1. 修复TypeScript类型声明错误 #

VSCode报错找不到SVG模块的类型声明，是因为TypeScript默认不识别SVG为React组件模块。解决方法：

• 在src目录下创建svg.d.ts（或在已有的vite-env.d.ts中添加），写入以下类型声明：

declare module '*.svg' {
  import React from 'react';
  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
  const src: string;
  export default src;
}

• 确保tsconfig.json的include数组包含src/**/*.d.ts，让TypeScript识别这个类型文件。

2. 修复部署后的404问题 #

你用Node静态服务部署出现Cannot GET /，主要是静态服务未正确指向构建产物或SPA路由未处理：

针对根路径部署 #

• 确认Vite执行npm run build后生成了完整的dist目录。
• 检查Node静态服务代码，确保将静态资源目录指向dist，同时处理SPA路由（避免刷新页面404）。以Express为例：

const express = require('express');
const app = express();
// 核心：指定静态文件目录为dist
app.use(express.static('dist'));

// 所有路由请求返回index.html，适配SPA
app.get('*', (req, res) => {
  res.sendFile('index.html', { root: 'dist' });
});

app.listen(3000);

针对子路径部署 #

如果前端部署在域名子路径（如https://xxx.com/my-app/），需要在vite.config.js中配置base：

export default defineConfig({
  // ...其他配置
  base: '/my-app/', // 替换为实际子路径
});

配置后重新构建，再部署到对应路径。

3. 验证vite-plugin-svgr插件有效性 #

当前插件配置本身无问题，可尝试显式指定处理范围确保插件生效：

svgr({
  include: 'src/**/*.svg',
})

修改后重新执行构建，确认SVG组件能正常导入使用。

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