Angular 7如何为dist中的图像指定文件夹答案

【问题标题】：Angular 7 how to specify folder for images in distAngular 7如何为dist中的图像指定文件夹
【发布时间】：2019-05-09 01:59:49
【问题描述】：

当我通过dist 文件夹中的ng build 命令构建项目时，我得到了我的js 文件以及所有其他资源，但我想将所有图像和字体移动到单独的文件夹中，例如assets。有人可以帮帮我吗？

更新：角.json "assets": [ "src/favicon.ico", "src/assets" ],

在我拥有的组件的 scss 中：

background-image: url('assets/img/no-notifications.svg');

但结果我进入了 dist 文件夹下一个文件：

no-notifications.7e08682a570485d1c108.svg

目标是保持图像路径与他在 scss 文件中指定的路径相同： assets/img/no-notifications.svg

【问题讨论】：

标签： angular angular7

【解决方案1】：

如果您还不知道，Angular cli 配置中添加了一个新选项（自 v7.2.1 起），用于将 css 资源复制到另一个文件夹（相对于输出路径）。

"outputPath": "wwwroot",
"resourcesOutputPath": "images"

https://angular.io/cli/build

【讨论】：

【解决方案2】：

试试这个

在assets 中创建img 文件夹

并使用./assets/img/your_image之类的路径

它会起作用的。

【讨论】：

我不行：我得到一个路径无法解析的错误，当我使用assets/img/your_image（没有./前缀）时它可以工作，但文件放入@的根目录987654326@文件夹
它不起作用。 ng-cli 只复制那些引用的文件，而不是完整的文件夹或子文件夹。

【解决方案3】：

给定的解决方案"resourcesOutputPath": "images" 适用于图像。但不幸的是，如果我们需要对其他资源（如 *.js 或 *.ttf 文件等）做同样的事情......它将无法正常工作。

以下是我对 *.js 文件执行此操作的方法：在文件 package.json 中，scripts 节点下方，我添加了一个名为 postbuild 的脚本，它将：

移动专用文件夹中的文件（在我的示例中为resources）
在index.html 中搜索<script src="*.js"></script> 并将其替换为<script src="resources/*.js"></script>。搜索和替换是使用sed commande line 完成的（请注意在Linux 或MacOS 上与sed commande lin 存在一些差异）。

这是我的package.json 文件的最终外观：

{
  "name": "my-project",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json",
    "build": "ng build",
    "postbuild": "mv ./dist/my-project/*.js ./dist/my-project/*.js.map ./dist/my-project/resources; sed -i -e 's/src=\"/src=\"resources\\//g' dist/my-project/index.html",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  }
}

【讨论】：

【解决方案4】：

默认情况下，使用“ng build”命令“assets”及其“子文件夹”将自动复制到“dist”文件夹。如果您想在同一根级别创建另一个文件夹，请说“资源”。

在 angular.json 中有“assets”配置，我们可以在其中定义“src/resources”。

angular.json

"assets": ["src/resources"],

【讨论】：

我有同样的规则，但这并不能解决我的问题，角度解析所有 css 文件并将所有资源移动到输出构建文件夹的根目录中。
这行不通。 ng-cli 不会复制整个文件夹，只复制那些需要的文件。

【解决方案5】：

在 angular.json 的 "build" 选项中设置 "rebaseRootRelativeCssUrls": true

【讨论】：