React项目地图仅本地渲染，构建发布后无法显示问题求助

1. 生产构建的代码压缩混淆导致变量丢失 #

react-scripts 默认的 build 命令会用 Terser 对代码进行压缩混淆，部分地图库（如 Maplibre GL、Leaflet）的内部变量可能在压缩过程中被误重命名或删除，控制台的 g is not defined 就是压缩后丢失的内部变量引用。

解决步骤： #

使用 craco 修改 Webpack 的 Terser 配置，排除地图相关库的混淆：

• 安装 craco：

npm install @craco/craco --save-dev

• 在项目根目录创建 craco.config.js：

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      webpackConfig.optimization.minimizer.forEach(minimizer => {
        if (minimizer.constructor.name === 'TerserPlugin') {
          minimizer.options.terserOptions.mangle = {
            exclude: ['maplibre-gl', 'leaflet', 'esri-leaflet', 'react-map-gl', 'react-leaflet']
          };
        }
      });
      return webpackConfig;
    },
  },
};

• 更新 package.json 的 scripts，替换 react-scripts 为 craco：

"scripts": {
  "prestart": "node aspnetcore-https && node aspnetcore-react",
  "start": "rimraf ./build && craco start",
  "build": "craco build",
  "test": "cross-env CI=true craco test --env=jsdom",
  "eject": "react-scripts eject",
  "lint": "eslint ./src/"  
},

2. 地图库 CSS 未在生产环境正确加载 #

虽然你已导入 CSS，但生产构建的 Tree Shaking 可能误移除了地图所需的样式，导致地图元素存在但不可见。

解决步骤： #

直接在 public/index.html 中引入 CDN 版本的 CSS，替代本地导入：

<!-- Maplibre GL CSS -->
<link href='https://unpkg.com/maplibre-gl@3.1.0/dist/maplibre-gl.css' rel='stylesheet' />
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />

3. 地图容器尺寸异常 #

生产环境下全局 CSS 可能影响地图容器的宽高，导致容器尺寸为 0，地图无法显示。

解决步骤： #

• 用浏览器开发者工具检查地图容器的计算样式，确认 width 和 height 是否生效；
• 给地图容器添加更明确的样式，比如：

style={{ width: "80vw", height: "90vh", minHeight: "500px", border: "1px solid #ccc" }}

添加边框可以快速确认容器是否存在。

4. API 密钥的生产环境注入问题 #

虽然你提到网络请求返回 200，但仍需确认生产环境中 API 密钥是否正确替换。避免硬编码密钥，改用环境变量：

解决步骤： #

• 在项目根目录创建 .env.production 文件，添加：

REACT_APP_MAPTILER_KEY=你的Maptiler密钥
REACT_APP_ESRI_KEY=你的Esri密钥

• 修改代码中的密钥引用：

mapStyle={`https://api.maptiler.com/maps/streets/style.json?key=${process.env.REACT_APP_MAPTILER_KEY}`}

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