Question

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

angular.json

            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "outputPath": "dist/samsara-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/samsara-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文件会在根目录中生成，同时字体文件也会复制到根目录中

我想：

为捆绑的js文件指定其他目录
为字体文件指定其他目录。（如果必须与js文件位于同一目录中，没问题，但很高兴与其他文件不同）

结构如下：

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

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

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

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

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

非常感谢您的帮助。

最好的问候

Answer 1

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

--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

Answer 2

根据文档here，您只需要更新angular.json文件即可更改资产目录。

类似的东西：

"assets": [{ "glob": "sitemap.xml", "input": "src/assets/", "output": "/" }],

要更改bundle js路径，您需要在构建时指定新路径，即ng build --prod --outputPath=NEW_PATH-文档-Link，否则您只需要更新index.html中的js路径即可。

Answer 3

是的。

您需要做的就是更改angular.json中的条目，

"assets":   [
              "src/assets/icons",
              "src/assets/images",
              "src/fonts"
            ],
"styles":   [
              "src/styles.css"
            ]

"scripts":  [
              "src/libs"
            ]

Angular 7-如何分隔不同目录中的文件

3 个答案: