6

ng build当我在文件夹中通过命令构建项目时,dist我的js文件都包含所有其他资源,但我想将所有图像和字体移动到单独的文件夹中,例如assets. 有谁能够帮我?

在此处输入图像描述

更新:angular.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

4

5 回答 5

11

如果您还不知道,Angular cli 配置(从v7.2.1 开始)中添加了一个新选项,用于将 css 资源复制到另一个文件夹(相对于输出路径)。

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

https://angular.io/cli/build

于 2019-03-06T12:50:25.113 回答
3

尝试这个

在里面创建 img文件夹assets

并使用路径./assets/img/your_image

它会起作用的。

于 2018-12-07T10:03:13.013 回答
1

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

这是我对*.js文件执行此操作的方法:在文件中,在节点package.json下方,我添加了一个名为的脚本,该脚本将:scriptspostbuild

  1. 移动专用文件夹中的文件(resources在我的示例中)
  2. 搜索并替换<script src="*.js"></script>index.html<script src="resources/*.js"></script>搜索和替换是使用sed命令行完成的(请注意,sed在 linux 或 MacOS 上与 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"
  }
}
于 2019-08-21T08:29:09.320 回答
0

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

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

角.json

"assets": ["src/resources"],
于 2018-12-07T10:11:03.223 回答
0

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

于 2021-12-21T14:03:46.583 回答