Heim >Web-Frontend >js-Tutorial >Ausführliche Erläuterung, wie man dem Pfad im Angular-Projekt ein bestimmtes Zugriffspräfix hinzufügt

Ausführliche Erläuterung, wie man dem Pfad im Angular-Projekt ein bestimmtes Zugriffspräfix hinzufügt

青灯夜游nach vorne: 2023-03-03 19:52:452231Durchsuche

Wie füge ich einem Pfad in einem Angular-Projekt ein Präfix hinzu? Im folgenden Artikel erfahren Sie, wie Sie dem Angular-Projektpfad ein bestimmtes Zugriffspräfix hinzufügen. Ich hoffe, er ist hilfreich für Sie!

Bei der Entwicklung mehrerer Projekte hoffen wir, über bestimmte Präfixpfade auf verschiedene Projekte zugreifen zu können. Verwenden Sie beispielsweise das Präfix /projectA/, um auf Projekt A zuzugreifen. Verwenden Sie das Präfix /projectB/, um auf Projekt B zuzugreifen. Code>. Wie sollen wir es einrichten? <code>/projectA/ 去访问项目 A；通过前缀 /projectB/ 去访问项目 B。我们应该怎么设置呢？

这里使用的框架是 Angular，"@angular/core": "~12.1.0"

更改项目前缀

假设我们添加的前缀为 /jimmy/

1. 更改路由前缀

在 app.module.ts 文件中添加 APP_BASE_HREF：

import { APP_BASE_HREF } from &#39;@angular/common&#39;;

@NgModule({
  providers: [
    {
      provide: APP_BASE_HREF,
      useValue: "/jimmy/"
    }
  ]
})

2. 更改打包的文件

这一步非必需，我们这里只是统一一下名称为 jimmy 而已【相关教程推荐：《angular教程》】

更改 angular.json 的输出文件：

{
  "projects": {
    ...
    {
      "outputPath": "jimmy"
    }
  }
}

3. 更改挂载文件的 base href

默认情况下，挂载的文件 index.html 一般长这样：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Jimmy</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="logo.png">
</head>
<body>
  <app-root></app-root>
</body>
</html>

我们是要将 23aca57e8dd334f7dfd2ef845edc2cf0 变成 958c2c5febee91530c7d665e107997d3。但是，我们不能手动更改挂载文件。因为只要构建后的文件更改即可，所以我们可以在 package.json 文件中完成这一步。只需要添加 --base-href=/jimmy/ 即可，如下：

"scripts": {
  "build": "ng build --base-href=/jimmy/"
}

运行 npm run build 打包后得到的文件夹 jimmy 下的 index.html 文件中的 base 标签自然会更改。

至此，我们已经更改完了访问的项目前缀，那么我们要部署到服务器上进行访问，是要怎么做呢？

部署项目

这里假设我已经将打包后的 jimmy 资源上传到了服务器，并且用 nginx 作为代理。

本项目是个 SPA 项目。MPA 项目的讲解会放在下一篇文章，相关项目使用技术是 next.js ，敬请期待

这里，我们需要更改 nginx.config 中的 server 字段:

server {
  listen 80 default_server;
  root /usr/share/nginx/fe/; // 打包的文件存放的位置
  
  location /jimmy/ {
    index  index.html index.htm;
    try_files $uri $uri/ /jimmy/index.html;
  }
}

执行 nginx -s reload 使得配置生效。通过 http://domain.com/jimmy/index.html 就可以访问到项目 jimmy

Das hier verwendete Framework ist Angular, "@angular/core": "~12.1.0"

Projektpräfix ändern

Angenommen, das von uns hinzugefügte Präfix ist /jimmy/

1. Routing-Präfix ändern🎜🎜Fügen Sie APP_BASE_HREF in der Datei app.module.ts hinzu: 🎜rrreee🎜2. Ändern Sie die gepackte Datei🎜

🎜Dieser Schritt ist nicht notwendig, wir haben hier nur den Namen jimmy vereinheitlicht Code > Das ist es [Empfehlung für ein entsprechendes Tutorial: „<a href="https://www.php.cn/course/list/20.html" target="_blank">Angular-Tutorial🎜"]🎜</a>

🎜 Ändern Sieangular.json: 🎜rrreee🎜3. Ändern Sie die Basis-HREF der bereitgestellten Datei span>🎜 🎜Standardmäßig sieht die gemountete Datei index.html normalerweise so aus: 🎜rrreee🎜Wir möchten 62ef4d59b51785055dc2c793448a1c82 in ändern dc18e036a3e1529e6ddd57b180e62105. Wir können die Mount-Datei jedoch nicht manuell ändern. Da nur die Post-Build-Datei geändert werden muss, können wir dies in der Datei package.json tun. Fügen Sie einfach --base-href=/jimmy/ wie folgt hinzu: 🎜rrreee🎜Führen Sie npm run build aus, um den Ordner jimmy zu erhalten, den Sie erhalten Verpackung Das Tag <code>base in der Datei index.html unter code> ändert sich natürlich. 🎜🎜Zu diesem Zeitpunkt haben wir das Präfix des Projekts, auf das zugegriffen wurde, geändert. Was sollten wir also tun, wenn wir es für den Zugriff auf dem Server bereitstellen möchten? 🎜

Bereitstellungsprojekt

🎜Hier wird davon ausgegangen, dass ich die gepackte jimmy-Ressource auf den Server hochgeladen und nginx verwendet habe als Schauspiel. 🎜

🎜Dieses Projekt ist ein SPA-Projekt. Die Erläuterung des MPA-Projekts wird im nächsten Artikel veröffentlicht. Die im entsprechenden Projekt verwendete Technologie ist next.js, also bleiben Sie dran🎜

🎜Hier müssen wir nginx.config server-Feld: 🎜rrreee🎜Führen Sie nginx -s reload aus, damit die Konfiguration wirksam wird. Sie können über http://domain.com/jimmy/index.html auf das Projekt jimmy zugreifen. 🎜🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Einführung in die Programmierung🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung, wie man dem Pfad im Angular-Projekt ein bestimmtes Zugriffspräfix hinzufügt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

nginx json html npm angular JS href http

Stellungnahme：

Dieser Artikel ist reproduziert unter:juejin.cn. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Was ist EventLoop? So testen Sie die Leistung eines Knotens oder einer SeiteNächster Artikel：Was ist EventLoop? So testen Sie die Leistung eines Knotens oder einer Seite

In Verbindung stehende Artikel

Mehr sehen