Ag Grid生产环境显示异常图标问题求助

我在项目中使用AG Grid Table时遇到了一个问题：本地开发环境里图标显示完全正常，但部署到生产环境后图标就变成了异常的方块（如图所示）。

生产环境异常效果：

本地环境正常效果：

项目依赖版本如下：

"ag-grid-community": "^31.3.2",
"ag-grid-enterprise": "^31.3.2",
"ag-grid-react": "^31.3.2",
"react": "18.2.0",
"react-dom": "18.2.0"

针对这个问题，分享几个有效的排查和解决思路：

• 确认AG Grid字体资源是否被正确打包
  AG Grid的图标依赖内置字体文件实现，生产打包时很容易因配置问题漏掉这些资源。检查你的打包工具（Webpack/Vite等）是否配置了字体文件（.woff/.woff2/.ttf）的处理规则，确保它们被复制到生产环境的静态资源目录中。
  比如Webpack可以这么配置：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.(woff|woff2|ttf|eot)$/,
          type: 'asset/resource',
          generator: {
            filename: 'fonts/[name][ext]'
          }
        }
      ]
    }
  }
  

  Vite默认会处理这类资源，只需检查vite.config.js有没有相关排除限制即可。

• 检查AG Grid CSS的引入是否正确
  确保在项目入口文件里完整引入AG Grid的基础样式和主题样式，不要只引入裁剪后的CSS：

  import 'ag-grid-community/styles/ag-grid.css';
  import 'ag-grid-community/styles/ag-theme-alpine.css'; // 替换为你使用的主题
  

  同时避免混用CDN和本地安装的AG Grid CSS，版本不匹配也会导致图标加载失败。

• 验证生产环境的资源路径配置
  如果项目部署在域名的子路径下，要确认打包工具的公共路径配置是否正确——比如Webpack的publicPath或Vite的base，否则字体文件的加载路径会出错。举个Vite的配置例子：

  export default defineConfig({
    base: '/your-project-subpath/'
  })
  

• 清除生产环境缓存
  有时候是旧缓存资源导致的问题，部署时记得给静态资源加上哈希后缀，或者强制清除CDN、浏览器缓存，确保新的字体文件能被正常加载。

• 确认依赖版本一致性
  虽然当前所有AG Grid相关依赖版本统一为31.3.2，但如果上面的方法都无效，可以尝试升级到AG Grid的最新稳定版本，说不定是旧版本存在的已知问题。

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