angular - 如何在角度索引文件中按网站域提供来自不同云服务存储桶的资产

Question

由于政治原因，目标是从两个云服务桶 (AWS) 和 (ALIYUN) 提供图像和字体资产。

中国客户不想在 AWS 中查看来自美国服务的图像/字体，因此我们需要从 ALIYUN 为他们提供服务。

因此，当域不是中国时，角度网站将从 AWS 提供资产，而当域是阿里云时，它将提供资产。

到目前为止，我的策略涉及在全局 scss 文件中使用域基础变量。此变量将在 SCSS 文件中添加所有资产 url，因此它看起来像：

域.scss 文件

$domain-asset: https://s3-amazon.myBucket/；

这个 scss 文件将在项目构建过程中被覆盖（使用节点的 writefile），因此如果我们改为切换到中国，该文件现在将在构建完成时具有以下内容：

域.scss 文件

$domain-asset: https://aliyun.oss.myBucket/；

这适用于 scss 文件中的资产，但是当在 index.html 中声明像 favicon 和预渲染字体之类的资产时，上下文不在 scss 文件中。无论如何我也可以在它们上设置基域吗？

我查看了 angular.json 配置，'deploy-url' 属性最接近我想要的，除了 url 绝对位于索引文件中的所有资产（包括 css 和 js 文件）中，但不是那些文件生活在云端，只有网站图标和字体。

标签： angularassetscdn

Answer 1

到目前为止，我想出的是使用读/写 node.js fs 来编辑具有正确存储桶基础 url 的文件，基于我们创建的命令行参数“cloud”以在 angular build 命令上设置为 aws 或 alibaba . - 对于索引文件中的资产。我在 JSDOM（模拟 DOM 操作）的帮助下修改了文件，找到了所有带有单词“assets”的链接（使用 JSDOM 查询选择器），并相应地为 url 加上前缀。- 对于 scss 文件中的图像，我读/写了一个全局 scss 样式表，其中包含保存 url 域的变量。

这很好用，直到两个桶都乘以 5 以适应不同的环境，例如开发、质量、分期等。如果在构建时完成，在 url 中设置环境会变得有问题，因为现在构建项目的人必须意识到它注定要到哪个环境。如果我们错误地构建开发映像并按质量进行部署，这将是一个意外发生。

接下来要尝试的是至少将样式表部署到存储桶中，这样所有图像都可以依赖于相对路径，而无需确定需要哪个存储桶 url。到目前为止，我不确定这将如何实施。