部署在Netlify的React应用在浏览器调试源中显示源码求助

核心原因 #

你看到src目录文件，大概率是因为构建过程中生成了source map文件，浏览器通过这些map文件反向映射回了原始的src源码，而非build文件夹里真的包含了src目录。React默认构建会生成source map用于开发调试，但生产环境通常不需要保留。

解决步骤 #

1. 关闭React构建时的source map生成 #

根据你使用的React脚手架，修改对应配置：

• Create React App：修改package.json中的build脚本，添加环境变量禁用source map：

  "scripts": {
    "build": "GENERATE_SOURCEMAP=false react-scripts build"
  }
  

• Vite：在vite.config.js中关闭构建source map：

  export default defineConfig({
    build: {
      sourcemap: false,
    }
  })
  

修改后本地重新执行npm run build，此时build文件夹中不会再生成.map后缀的文件。

2. 检查并重新上传/部署build文件夹 #

• 手动上传场景：确认新构建的build目录里没有src文件夹，也没有.map文件，再重新上传到Netlify。
• Netlify自动构建场景：在Netlify后台的Site settings > Build & deploy > Environment variables中添加GENERATE_SOURCEMAP=false，然后触发重新部署。

3. 清理Netlify缓存 #

旧缓存可能导致部署后仍保留之前的source map，操作步骤：

1. 进入Netlify后台的Deploys页面
2. 找到最新部署记录，点击右侧的Clear cache and deploy site
3. 等待重新部署完成后刷新浏览器检查

额外说明 #

关闭source map不仅能隐藏源码，还能减小构建包体积，提升生产环境加载速度。如果后续需要生产环境调试，可以重新开启source map，但建议通过Netlify隐私设置限制访问，不过大多数生产场景下不需要保留。

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