首页 > 解决方案 > Angular 7 - 如何分隔不同目录中的文件

问题描述

我正在将我的 Angular 7 应用程序配置为生产并尝试在不同目录中组织文件。

角.json

            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "outputPath": "dist/appname-ui",
                        "index": "src/index.html",
                        "main": "src/js/main.ts",
                        "polyfills": "src/js/polyfills.ts",
                        "tsConfig": "src/tsconfig.app.json",
                        "assets": [
                            "src/favicon.ico",
                            "src/assets"
                        ],
                        "styles": [
                            "src/styles.css",
                            "src/appname-theme.scss"
                        ],
                        "scripts": []
                    },

目前我的目录如下所示:

├── dist
|   ├── <appname>
|   |   ├── assets
|   |   |   ├── icons
|   |   |   ├── images

|   |   |   index.html
|   |   |   *.js (bundled files: runtime.js, polyfills.js, vendor.js, main.js)
|   |   |   *.map
|   |   |   style.css
|   |   |   *.woff, *.woff2, *.tff, *.eot

通过编译,在根目录中生成捆绑的 javascript 文件以及复制到根目录的字体文件

我想:

  1. 为捆绑的 js 文件指定不同的目录
  2. 为字体文件指定不同的目录。(如果它必须是 js 文件的同一目录没问题,但很高兴不同)

结构如下所示:

├── dist
|   ├── <appname>
|   |   ├── assets
|   |   |   ├── icons
|   |   |   ├── images

|   |   |   index.html
|   |   |   style.css

|   |   ├── libs
|   |   |   |   *.js
|   |   |   |   *.map

|   |   ├── fonts
|   |   |   *.woff, *.woff2, *.tff, *.eot

有可能实现这一目标吗?如果是怎么办?

非常感谢您的帮助。

最好的祝福

标签: angularangular-cliangular7

解决方案


它不受官方支持,但您可以使用,

--baseHref=baseHref      Base url for the application being built.

--deployUrl=deployUrl    URL where files will be deployed.

--outputPath=outputPath  path for the new output directory

通过组合它们,您可以将 js/map/index.html 文件移动到特定位置并更新 index.html 中的 baseHref 和 url。

更多关于,

https://github.com/angular/angular-cli/issues/10171


推荐阅读