部署在Vercel的React项目如何隐藏网页调试器可见的文件夹结构？

首先明确：正常生产部署的React项目，应该只有编译压缩后的静态资源（比如build目录里的文件），不会暴露完整的项目源码结构。出现这个问题，要么是部署配置错了，要么是没禁用source map。下面是具体解决步骤：

1. 强制Vercel只部署生产构建产物 #

如果用的是Create React App（CRA），直接在项目根目录新建vercel.json文件，写入以下配置，指定构建命令和输出目录：

{
  "buildCommand": "npm run build",
  "outputDirectory": "build"
}

这样Vercel会自动执行构建命令，只把编译好的build目录内容部署上去，不会包含src、node_modules这些源码目录。

2. 禁用Source Map（避免源码映射暴露） #

就算部署的是build目录，默认生成的source map也会让调试器映射回原始源码。可以通过两种方式禁用：

• 修改package.json里的build脚本：

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

• 或者在项目根目录新建.env.production文件，添加一行：

GENERATE_SOURCEMAP=false

3. 检查Vercel后台的项目配置 #

登录Vercel后台找到你的项目，进入「Settings」→「Build & Development Settings」：

• 确认「Build Command」是npm run build（或者yarn/pnpm build，看你用的包管理器）
• 确认「Output Directory」是build
• 要是之前部署过错误版本，推个空commit触发重新部署就行：git commit --allow-empty -m "重新部署"

4. 清理旧的错误部署 #

如果之前不小心把源码传上去了，Vercel可能还留着旧文件。去「Deployments」页面删掉错误的部署记录，再重新部署一次正确的版本。

要是做完这些还能看到源码结构，检查下有没有其他工具（比如自定义的部署脚本）把源码目录也包含进去了。

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