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

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

青灯夜游avant: 2023-03-03 19:52:452183parcourir

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 !

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/"
    }
  ]
})

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

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 62ef4d59b51785055dc2c793448a1c82 en dc18e036a3e1529e6ddd57b180e62105. 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!

nginx json html npm angular JS href http

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Qu’est-ce qu’EventLoop ? Comment tester les performances d'un nœud ou d'une pageArticle suivant：Qu’est-ce qu’EventLoop ? Comment tester les performances d'un nœud ou d'une page

Articles Liés

Voir plus