React 部署在服务器后暴露源码

Wed, 26 Nov 2025 13:31:45 +0800

诱因

默认情况下，Create React App（CRA）或其他构建工具（Vite、Webpack）在执行 build 命令时，会生成 source map 文件

Source Map 是一种映射文件（通常是 .map 文件），它将压缩/编译后的代码（main.js）映射回原始的源代码（App.jsx）。它的主要作用是方便调试：即使代码被压缩、混淆或转译（JSX → JS、ES6+ → ES5），开发者依然可以在浏览器中看到原始代码结构。

在项目根目录创建一个或修改已有文件 .env.production ，加入以下内容：

GENERATE_SOURCEMAP=false

重新运行 npm run build，这样构建出的产物将不包含 .map 文件，JS 文件末尾也不会有 sourceMappingURL 注释。

在 vite.config.js 中配置：

export default defineConfig({
  build: {
    sourcemap: false, // 关闭 source map
  },
});

在 webpack.config.prod.js 中设置：

module.exports = {
  devtool: false, // 或 'hidden-source-map'（生成但不引用）
  // ...
};

如果无法修改构建配置，也可以在部署脚本中手动删除：

# 构建后删除所有 .map 文件
rm build/static/**/*.map

在 Nginx 中添加：

location ~ \.map$ {
  deny all;
}

这样即使文件存在，用户也无法通过浏览器访问