如何在Angular多locale场景下配置独立公共assets文件夹

配置步骤 #

1. 调整angular.json中build节点的基础资源配置

找到projects.<你的项目名>.architect.build.options节点，修改assets配置，指定公共资源统一输出到构建根目录的assets文件夹：

"options": {
  "outputPath": "dist/你的项目名",
  "assets": [
    {
      "glob": "**/*",
      "input": "src/assets/",
      "output": "/assets/"
    },
    "src/favicon.ico"
  ],
  // 其他原有配置（比如index、main、polyfills等保留不变）
}

2. 配置i18n多语言输出路径

在同层级的i18n节点中，给每个语言单独指定输出路径，放到构建根目录的对应语言子文件夹下：

"i18n": {
  "sourceLocale": "zh-CN",
  "locales": {
    "en-US": {
      "translation": "src/locale/messages.en.xlf",
      "outputPath": "dist/你的项目名/en"
    },
    "zh-CN": {
      "translation": "src/locale/messages.zh.xlf",
      "outputPath": "dist/你的项目名/zh"
    }
  }
}

3. 给各语言构建配置指定baseHref

在build.configurations节点下，给每个语言的构建配置添加对应子目录的baseHref，避免页面资源路径解析错误：

"configurations": {
  "production": {
    // 原有生产配置保留，localize设为true开启全量多语言构建
    "localize": true,
    // 其他生产配置如optimization、aot等保持不变
  },
  "en-US": {
    "localize": ["en-US"],
    "baseHref": "/en/"
  },
  "zh-CN": {
    "localize": ["zh-CN"],
    "baseHref": "/zh/"
  }
}

4. 调整项目内资源引用路径

所有代码中引用公共资源的路径统一使用根绝对路径，比如引用图片写/assets/xxx.png，不要用相对路径./assets/xxx.png。

验证效果 #

执行生产构建后，生成的目录结构如下：

dist/你的项目名/
├── assets/       # 全局唯一公共资源文件夹，所有语言共用
├── zh/           # 中文语言构建产物，无重复assets
│   ├── index.html
│   ├── main.xxx.js
│   └── ...
└── en/           # 英文语言构建产物，无重复assets
    ├── index.html
    ├── main.xxx.js
    └── ...

该配置完全解决提到的三个问题：

• 开发、生产环境都统一从根路径加载assets，无需额外适配即可正常加载图片
• 构建产物直接符合预期目录结构，无需额外手动操作，不影响自动化部署流程
• assets仅构建一份，无重复冗余，不会浪费磁盘空间

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