自定义Angular-CLI以在构建时修改相对路径

Question

我正在使用Angular CLI来构建我的Angular 4项目。我需要运行应用程序

1. 作为独立应用程序
2. 作为嵌入门户页面的应用程序

该应用程序作为独立应用运行良好。

当嵌入在静态内容从CDN提供的门户中时，使用相对URL加载的资源不会被加载，因为它们嵌套在CDN下的不同根目录下。

e.g。在我的独立应用程序中，我有一个背景图片，我在我的scss文件中将其称为background：url（'/ assets / images / bg.jpg'）。但是，当嵌入门户网站时，相对URL为 / cdn / app /assets/images/bg.jpg。

有没有办法在 ng build 中更改SCSS和HTML中使用的相对网址？我可以定义一个保存我的CDN路径的变量吗？Angular-CLI在构建时用实际值替换变量？

e.g。

background：url（'$ cdnAppRoot / assets / images / bg.jpg'）;

替换为

background：url（'/ cdn / app / assets / images / bg.jpg'）

Answer 1

为生产而构建时，可以添加 deploy-url param用于更改资产的读取位置。

ng build -d /cdn/app

我建议添加一个名为prod的新npm脚本，以便更轻松地使用

{
   "scripts: {
     // Other npm scripts
     "prod": "ng build -d /cdn/app"
   }
}