Vite+React部署Github Pages时图片无法显示的问题求助

一、Github Pages图片渲染修复 #

• 统一路径规则：Github Pages部署后站点根路径为用户名.github.io/仓库名，图片引用必须带上仓库名前缀。比如你的仓库名为portfolio，图片放在public/assets/imgs下，引用路径需写/portfolio/assets/imgs/xxx.png。如果用Vue/React框架，直接在项目配置文件中设置base: '/portfolio/'，框架会自动处理所有资源路径。
• 验证public目录有效性：确保图片直接放在框架约定的public根目录下，不要放在src目录内（src内的图片会被当作模块处理，部署后路径易出错）。打包后检查dist目录里的图片是否存在，路径是否和引用一致。
• 本地预校验：执行npm run build生成生产包，在本地打开dist目录的index.html，查看浏览器控制台的网络请求，确认图片的请求路径是否正确，避免部署后才排查问题。

二、package.json安全清理清单 #

可删除内容 #

• devDependencies下的开发工具包：比如eslint、prettier、webpack-dev-server等，这些仅用于本地开发校验和调试，部署到Github Pages完全不需要。
• scripts中的开发命令：比如dev、serve、lint等，只保留build命令即可（用于生成生产打包文件）。
• 自定义非必要字段：比如lint-staged、husky、config等代码提交校验相关配置，部署后无作用。

必须保留内容 #

• name、version：npm打包的基础标识，缺失可能导致构建失败。
• dependencies下的生产依赖：比如React/Vue核心包、路由库、UI组件库等，是项目运行的必要依赖。
• scripts中的build命令：确保能正确生成框架指定的输出目录（比如dist）。

三、部署流程优化 #

• 进入仓库的Github Pages设置页面，选择gh-pages分支作为部署源，并指定输出目录为dist（或框架打包后的目录）。
• 推荐用gh-pages包自动化部署：在项目中安装gh-pages（npm install gh-pages --save-dev），然后在package.json的scripts中添加"deploy": "npm run build && gh-pages -d dist"，执行npm run deploy即可自动完成打包和部署。

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