Question

使用Angular universal构建Angular项目时，在dist文件夹中会生成3个文件夹。

服务器
静态
浏览器

server文件夹用于在服务器上进行预渲染。但是，static和browser文件夹用于将网站部署在静态主机上。

static和browser文件夹之间有什么区别？哪个更好部署？

编辑1： 我认识到，static和browser文件夹在部署时具有相同的内容，但结构不同。

在静态版本中：根目录中有一个index.html和一些文件（js，css，...），此外，每个组件都有自己的文件夹，其中包含与该组件相对应的index.html。
在浏览器版本中：根文件夹中有一个index.html和一些文件（js，css等），没有与组件相对应的文件夹（它们的模板嵌入在根文件夹文件中）。

以下是Angular.json文件的内容：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "myapp": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/browser",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/font-awesome/css/font-awesome.min.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "myapp:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "myapp:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "myapp:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": ["src/styles.css"],
            "scripts": [],
            "assets": ["src/favicon.ico", "src/assets"]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
            "exclude": ["**/node_modules/**"]
          }
        },
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/server",
            "main": "src/main.server.ts",
            "tsConfig": "src/tsconfig.server.json"
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }
          }
        }
      }
    },
    "myapp-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "prefix": "",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "myapp:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "myapp:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": ["**/node_modules/**"]
          }
        }
      }
    }
  },
  "defaultProject": "myapp"
}

Answer 1

TL; DR;

您需要至少部署browser文件夹，该文件夹将始终使用。如果要为这些页面快速加载，请为静态路由部署static文件夹，如果托管服务器允许server运行并且要进行动态渲染，请为静态页面部署nodejs文件夹用于动态路由（用于快速加载和SEO友好页面）。

说明

使用通用角度时，必须区分动态渲染和预渲染。

动态渲染

无论何时访问页面，Angular Universal都会渲染页面（使用nodejs，使用server目录中的服务器捆绑软件），将生成的内容发送回客户端（带有已显示的html组件，内联CSS））。页面加载后，来自客户端angular应用程序的JS将使用browser文件夹中的文件（因此包括样式和js文件）来接管

预渲染

使用预渲染，在部署之前，脚本将解析您在路由中定义的所有静态路由（/contact，/about，...），执行这些路由的渲染，然后将生成的html保存到static文件夹中，其中每个文件夹（其中一个文件夹对应于一条路线）都带有一个index.html文件。因此，在访问您的网站之前，您已经具有正确的html。

例如，当您访问contact路由时，将返回dist/static/contact/index.html文件。但是，与动态渲染一样，一旦页面加载完毕，您将仍然可以从browser文件夹中使用有角度的JS应用程序。如果仅使用预渲染，则不需要nodejs。

您可能可以部署所有3个文件夹。始终需要browser，您可以将static文件夹用于静态路由，并让nodejs使用server文件夹来呈现动态路由页面

查看有关预渲染here的更多信息

静态文件夹与浏览器文件夹

1 个答案: