Explication détaillée de la façon d'ajouter un préfixe d'accès spécifié au chemin dans le projet Angular-js tutoriel-php.cn

Explication détaillée de la façon d'ajouter un préfixe d'accès spécifié au chemin dans le projet Angular

青灯夜游

Libérer： 2023-03-03 19:52:45

avant

2166 Les gens l'ont consulté

Comment ajouter un préfixe au chemin dans un projet Angular ? L'article suivant vous présentera la méthode d'ajout d'un préfixe d'accès spécifié au chemin du projet Angular. J'espère que cela vous sera utile !

Explication détaillée de la façon d'ajouter un préfixe d'accès spécifié au chemin dans le projet Angular

Lors du développement de plusieurs projets, nous espérons accéder à différents projets via des chemins de préfixe spécifiés. Par exemple, utilisez le préfixe /projectA/ pour accéder au projet A ; utilisez le préfixe /projectB/ pour accéder au projet B. code>. Comment devrions-nous le mettre en place ? /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/"
    }
  ]
})

Copier après la connexion

2. 更改打包的文件

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

更改 angular.json 的输出文件：

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

Copier après la connexion

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>

Copier après la connexion

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

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

Copier après la connexion

运行 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;
  }
}

Copier après la connexion

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

Le framework utilisé ici est Angular, "@angular/core": "~12.1.0"

Changer le préfixe du projet

Supposons que le préfixe que nous ajoutons soit /jimmy/

1. Modifiez le préfixe de routage🎜🎜Ajoutez APP_BASE_HREF dans le fichier app.module.ts : 🎜rrreee🎜2. Modifiez le fichier empaqueté🎜

🎜Cette étape n'est pas nécessaire, nous avons simplement unifié le nom ici comme jimmy code > C'est tout [Recommandation de tutoriel associée : "<a href="https://www.php.cn/course/list/20.html" target="_blank">tutoriel angulaire🎜"]🎜</a>

🎜 Changeangular.json : 🎜rrreee🎜Modifiez le href de base du fichier montéspan>🎜 🎜Par défaut, le fichier monté index.html ressemble généralement à ceci : 🎜rrreee🎜Nous voulons changer <base href="/"> en <base href="/jimmy/">. Cependant, nous ne pouvons pas modifier manuellement le fichier de montage. Puisque seuls les fichiers post-build doivent être modifiés, nous pouvons le faire dans le fichier package.json. Ajoutez simplement --base-href=/jimmy/, comme suit : 🎜rrreee🎜Exécutez npm run build pour obtenir le dossier jimmy après l'empaquetage La balise base dans le fichier index.html sous code> changera naturellement. 🎜🎜À ce stade, nous avons modifié le préfixe du projet accédé, alors que devons-nous faire si nous voulons le déployer sur le serveur pour y accéder ? 🎜

Projet de déploiement

🎜Ici, il est supposé que j'ai téléchargé la ressource jimmy packagée sur le serveur et utilisé nginx comme agissant. 🎜

🎜Ce projet est un projet SPA. L'explication du projet MPA sera placée dans le prochain article. La technologie utilisée dans le projet concerné est next.js, alors restez à l'écoute🎜

🎜Ici, nous devons changer nginx.config champ server : 🎜rrreee🎜Exécutez nginx -s reload pour que la configuration prenne effet. Le projet jimmy est accessible via http://domain.com/jimmy/index.html. 🎜🎜Pour plus de connaissances sur la programmation, veuillez visiter : 🎜Introduction à la programmation🎜 ! ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!