Vite React部署Netlify后技能图标无法渲染求助

• 检查图标资源引入路径

  • 若图标放在项目public文件夹下，需使用根路径引用（如/icons/skill-icon.svg），而非相对路径；若放在src/assets目录，需通过import方式引入后使用（如import SkillIcon from './assets/skill-icon.svg'）。
  • 禁止使用本地磁盘绝对路径（如C:/xxx/icon.svg），这类路径在生产环境完全无效。

• 配置Vite静态资源处理规则

  • 打开项目根目录的vite.config.js，添加assetsInclude配置，确保图标格式被Vite识别并打包：

    import { defineConfig } from 'vite'
    import react from '@vitejs/plugin-react'
    
    export default defineConfig({
      plugins: [react()],
      assetsInclude: ['**/*.svg', '**/*.png', '**/*.ico'] // 包含所有需要的图标格式
    })
    

  • 配置后重新执行npm run build，Vite会自动将图标打包到dist/assets，无需手动添加。

• 验证Netlify部署配置

  • 登录Netlify后台，进入项目的「Site settings」→「Build & deploy」，确认Build command为npm run build，Publish directory为dist。
  • 手动添加图标到dist后，必须触发Netlify重新部署（而非仅刷新页面），确保新资源被上传到服务器。

• 排查浏览器控制台错误

  • 打开网站开发者工具（F12），查看「Console」和「Network」标签：
    • 「Console」会显示图标加载失败的具体错误（如404）；
    • 「Network」可查看图标请求的路径，对比dist文件夹内的实际路径，调整代码中的引用路径匹配。

• 清理缓存重新构建

  • 本地执行以下命令彻底清理缓存后重新构建：

    rm -rf node_modules dist
    npm install
    npm run build
    

  • 避免因缓存导致的资源打包不完整问题。

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