使用React Js构建项目后缺失文件夹及样式异常问题

一、images文件夹未生成的排查与修复 #

• 先确认图片引用方式：如果是用import语法引入的图片（比如import logo from './images/logo.png'），React打包时会自动把图片转存到build/static/media目录，不会保留原images文件夹，这是正常打包逻辑，不用慌。
• 要是你是把images放在public文件夹下，build后没在build根目录看到images，检查这两点：
  • public文件夹里的images是否真的存在，文件路径有没有打错
  • 要是用了自定义配置（比如craco、webpack配置文件），看看是不是改了静态资源打包规则，把图片合并到其他目录了
• 临时验证：直接把public/images里的文件复制到build目录下，看看页面能不能正常加载图片，先排除文件丢失的问题

二、CSS样式显示异常的解决办法 #

• 检查CSS里的图片路径：如果CSS用了相对路径（比如background: url('../images/bg.png')），打包后CSS在build/static/css目录，图片可能在static/media或者build/images，路径不匹配就会加载失败。改成url('../media/bg.png')（对应import的图片）或者url('/images/bg.png')（对应public下的图片）试试。
• 看package.json里的homepage配置：如果设了"homepage": "."，本地直接打开index.html会出路径问题。部署在根目录的话，删掉这个配置或者改成"/"；要是部署在子目录，就设成对应子路径（比如"/my-app/"）。
• 别直接双击打开index.html：本地用file://协议打开build后的index.html，会触发跨域限制，样式和静态资源都加载不了。用npx serve build启动本地服务器，再访问对应的地址（一般是http://localhost:3000）就正常了。

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