如何在Nx React应用中引入共享资产库并适配生产开发环境？

1. 是否需要更新project.json？该如何操作？ #

需要更新，但完全不用覆盖现有构建逻辑，只需要在对应目标中扩展资产配置即可。

操作步骤： #

• 打开React应用monday-rv-item的project.json，找到targets下的开发服务目标（通常是serve）和生产构建目标（如果有自定义构建目标也同理）。
• 在每个目标的options中添加assets数组，配置共享资产的来源和输出路径：

  "serve": {
    "executor": "@nrwl/react:dev-server",
    "options": {
      // 保留原有配置
      "assets": [
        "apps/monday-rv-item/public", // 保留应用自身的公共资产
        {
          "input": "libs/shared/assets", // 共享资产库的根路径
          "glob": "**/*", // 匹配所有文件和子目录
          "output": "assets/shared" // 开发/生产环境中资产的访问路径前缀
        }
      ]
    }
  }
  

• 如果你的应用有生产构建目标（比如build），同样在其options的assets数组中加入上述共享资产配置，确保生产构建时资产会被复制到产物目录。

另外，建议给共享资产库libs/shared/assets的project.json也添加一个基础构建目标，方便单独构建资产：

"targets": {
  "build": {
    "executor": "@nrwl/workspace:copy",
    "options": {
      "outputPath": "dist/libs/shared/assets",
      "assets": [
        {
          "input": "libs/shared/assets",
          "glob": "**/*",
          "output": "."
        }
      ]
    }
  }
}

2. 如何在HTML中使用这些共享资产？ #

根据刚才配置的output路径（示例中是assets/shared），直接用相对根路径引用即可，开发和生产环境通用：

• 引用图片：

  <img src="/assets/shared/logo.png" alt="品牌Logo" />
  

• 引用字体或样式文件：

  <link rel="stylesheet" href="/assets/shared/styles/custom-font.css" />
  

如果是在React组件中使用，也可以结合process.env.PUBLIC_URL确保路径适配不同环境：

<img src={`${process.env.PUBLIC_URL}/assets/shared/logo.png`} alt="品牌Logo" />

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