Eine kurze Analyse der Konfigurationselemente des Angular CLI-Releasepfads

Vorwort

Bei der Projektfreigabe ist immer eine Verpackung entsprechend den spezifischen Umständen erforderlich. Angular CLI bietet ein praktisches Verpackungstool „ng build“. Für den Release-Pfad gibt es mehrere Konfigurationen, die hier zusammengefasst sind.

Basis-Href

Es gibt die Verzeichnisstruktur des Projektbuilds an. Wenn es beispielsweise auf „deploy-test“ eingestellt ist, befindet sich das endgültige Verpackungsergebnis im Verzeichnis dist/deploy-test.

Wenn ein Projekt erstellt wird, lautet die Standardeinstellung in index.html <base href="/" rel="external nofollow" >, was bedeutet, dass die Anwendung relativ zum Stammverzeichnis ausgeführt wird. Zu diesem Zeitpunkt basiert der relative Pfad der Seite auf dieser Konfiguration. Beispielsweise lautet der tatsächliche Zugriffspfad von  /image/test.png.

Der Ressourcenanforderungspfad wird dadurch nicht geändert:

<Text>
 <Anwendungsstamm></Anwendungsstamm>
 <script src="runtime.js"></script>
 <script src="polyfill.js"></script>
 <script src="styles.js"></script>
 <script src="main.js"></script>
</body>

Unsere Projekte werden jedoch häufig in einem Unterverzeichnis ausgeführt. Erstellen Sie beispielsweise unter den Webanwendungen von Tomcat ein neues Projektverzeichnis „Deploy-Test“. Dementsprechend sollte base-href auch auf „/deploy-test/“ gesetzt werden.

Es ist zu beachten, dass der Schrägstrich (/) hier unbedingt erforderlich ist. Angenommen, das Server-Unterverzeichnis heißt „test“, dann erfolgen Verpackung und Bereitstellung wie folgt:

• Test: Wenn kein Ende hinzugefügt wird, wird baseHref wirksam und die Ressource kann abgerufen werden. Der von der Anwendung generierte Browserpfad ist jedoch falsch und lautet host:port/test/test#/index. Beim Aktualisieren der Seite kann index.html nicht gefunden werden.
• /test: nur den Anfang hinzufügen, baseHref ist ungültig, Ressourcen werden relativ zum Host:Port-Stammverzeichnis geladen und 404 wird gemeldet.
• test/: Fügen Sie einfach das Ende hinzu, der Ressourcenanforderungspfad lautet host:port/test/test/XXX.js und es wird 404 gemeldet.
• /test/: Der Pfad zur Anwendungsgenerierung lautet host:port/test/#/index und die Ressourcen werden korrekt geladen.
  

Es gibt drei Hauptmethoden zum Ändern von base-href beim Verpacken:

1. Konfigurieren Sie <base href="XXX" rel="external nofollow" > in index.html
2. Verwenden Sie zum Konfigurieren CLI-Befehlszeilenparameter: ng build --baseHref=/XXX/
3. In angular.json konfigurieren:

 "Architekt": {
 "bauen": {
  "Builder": "@angular-devkit/build-angular:Browser",
  "Optionen": {
  "baseHref": "/kanpm/",
  }
 }
 }

Das heißt, baseHref wird verwendet, um den Bereitstellungspfad der Anwendung zu konfigurieren.

Bereitstellungs-URL

Wenn die Ressourcen und Anwendungen im selben Serververzeichnis abgelegt sind, reicht baseHref aus. Was aber, wenn sich die Ressourcen und Anwendungen an unterschiedlichen Speicherorten befinden?
Beispielsweise wird die Anwendung im Verzeichnis „/app“ bereitgestellt und die Ressourcendateien in „/app/resource“ abgelegt; oder Sie möchten verschiedene Ressourcen der beschleunigten Anwendung über ein CDN (wie cdn.example.com) hosten und die Anwendung selbst auf Ihrem eigenen Server bereitstellen.

Durch die Konfiguration von deploy-url wird der Ressourcenanforderungspfad beim Verpacken geändert. Wenn beispielsweise --deploy-url=/app/resource/ ist, sieht die endgültige gepackte index.html wie folgt aus:

<Text>
 <Anwendungsstamm></Anwendungsstamm>
 <script src="/app/resource/runtime.js"></script>
 <script src="/app/resource/polyfill.js"></script>
 <script src="/app/resource/styles.js"></script>
 <script src="/app/resource/main.js"></script>
</body>

Wenn beispielsweise ein Bild  vorhanden ist, wird der Pfad nach dem Verpacken zu „/app/resource/test.png“.

Entsprechend kann es auch in angular.json oder auf der Kommandozeile konfiguriert werden

"Architekt": {
 "bauen": {
 "Builder": "@angular-devkit/build-angular:Browser",
 "Optionen": {
  "deployUrl": "/test/",
 }
 }
}

Oder ng build --deploy-url="/test/"

✨Hinweis: Die Bereitstellungs-URL kann nur gepackte Ressourcendateien ändern.

Importieren von Stilressourcen

Nach dem Festlegen von base-href ist das Verhalten der in das Stylesheet importierten Ressourcenpfade in verschiedenen CLI-Versionen unterschiedlich:

• Der Basispfad wird in den Versionen 2 bis 7 automatisch hinzugefügt. Beispielsweise wird bei url("/assets/path/to/my/asset.png") automatisch ein „base-href“ vorne eingefügt.
• Version 8 fügt vorübergehend den Befehlszeilenparameter --rebase-root-relative-css-urls=true hinzu, um das Verhalten mit vorherigen Versionen konsistent zu halten und den Übergang zu erleichtern. In der nächsten Version wird er jedoch nicht mehr verwendet.
• Ab Version 9 müssen zum Importieren von Ressourcenpfaden relative Pfade verwendet werden. Daher kann der Import der Stildatei in die Komponente wie folgt geschrieben werden (url("~src/assets/path/to/my/asset.png")).
  

Weil baseHref ein Laufzeitwert ist, der den relativen Pfad der Angular-Anwendung steuert. Es sollte nicht verwendet werden, um das Verpackungsverhalten zur Kompilierungszeit zu handhaben. Für die Abhängigkeitsverwaltung der Verpackung sollte webpack es über relative Pfade identifizieren, was auch für die zusätzliche Verarbeitung von Ressourcen praktisch ist (z. B. das Hinzufügen eines Hash-Werts zum Ressourcendateinamen, um sicherzustellen, dass er nicht zwischengespeichert wird).

✨Hinweis: Beim Verpacken werden die zu verpackenden Ressourcen von webpack kopiert und im Stammverzeichnis „dist“ abgelegt (es gibt auch eine Originalkopie im Ordner „Assets“). Daher sollten die im Stil oder in der Komponente eingeführten Dateien außerhalb des Assets-Verzeichnisses abgelegt werden, da beim Erstellen eines Projekts durch die CLI die Standardkonfiguration von angular.json wie folgt lautet:

"Architekt": {
 "bauen": {
 ...
 "Optionen": {
  "Vermögenswerte": [
  "src/favicon.ico",
  "Quelle/Vermögenswerte",
  ],
 }
}

Wie Sie sehen, werden in der Standardkonfiguration alle Dateien im Assets-Ordner direkt in den Dist-Ordner kopiert, ohne gepackt zu werden (ich persönlich denke, dass der Verzeichnisname von Nuxt, es „Statics-Ordner“ zu nennen, angemessener ist). Dateien, die in Komponenten importiert oder mit relativen Pfaden in Stildateien eingeführt werden müssen, können in einem anderen Ordner abgelegt werden. Es ist nicht erforderlich, sie in angular.jsn zu konfigurieren, um doppelte Dateien nach dem Verpacken zu vermeiden.

Zusammenfassen

Wir können versuchen, sie zusammenzufassen:

ng build --prod --base-href="/kanpm/" rel="externes nofollow" --deploy-url="/kanpm/resource/"

Nachdem wir den kompilierten und gepackten Ordner „dist/kanpm“ erhalten haben, legen wir alle gepackten und kompilierten Dateien in das Verzeichnis „kanpm/resource“ des Servers und legen „index.html“ und andere direkt kopierte statische Dateien in das Verzeichnis „kanpm/“ des Servers. Fordern Sie host:port/kanpm an und Sie werden sehen, dass das Projekt erfolgreich läuft!

Daraus können wir ersehen, dass base-href den Bereitstellungsort der Anwendung bestimmt, also den Pfad, über den Benutzer auf die Website zugreifen können. Die Bereitstellungs-URL bestimmt, wo die gepackten Ressourcendateien (Bilder, Schriftarten, JS usw.) bereitgestellt werden. Dies kann in einem Unterverzeichnis der Anwendung wie im obigen Beispiel oder auf einem CDN-Server sein.

Dies ist das Ende dieses Artikels über Konfigurationselemente des Angular CLI-Releasepfads. Weitere Informationen zum Angular CLI-Releasepfad finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!