Angular 프로젝트의 경로에 지정된 액세스 접두사를 추가하는 방법에 대한 자세한 설명-JS 튜토리얼-php.cn

Angular 프로젝트의 경로에 지정된 액세스 접두사를 추가하는 방법에 대한 자세한 설명

青灯夜游

풀어 주다： 2023-03-03 19:52:45

앞으로

2165명이 탐색했습니다.

Angular 프로젝트에서 경로에 접두사를 추가하는 방법은 무엇입니까? 다음 글에서는 Angular 프로젝트 경로에 지정된 액세스 접두사를 추가하는 방법을 소개하겠습니다. 도움이 되길 바랍니다.

Angular 프로젝트의 경로에 지정된 액세스 접두사를 추가하는 방법에 대한 자세한 설명

여러 프로젝트를 개발할 때 지정된 접두사 경로를 통해 다양한 프로젝트에 액세스할 수 있기를 바랍니다. 예를 들어, 프로젝트 A에 액세스하려면 접두사 /projectA/를 사용하고, 프로젝트 B에 액세스하려면 <code>/projectB/를 사용하세요. 코드>. 어떻게 설정해야 할까요? /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>

로그인 후 복사

我们是要将 <base href="/"> 变成 <base href="/jimmy/">。但是，我们不能手动更改挂载文件。因为只要构建后的文件更改即可，所以我们可以在 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

여기에 사용된 프레임워크는 Angular, "@angular/core": "~12.1.0"

입니다. 프로젝트 접두사 변경

우리가 추가하는 접두사가 /jimmy/

라고 가정합니다. 1. 라우팅 접두사 변경🎜🎜 app.module.ts 파일에 APP_BASE_HREF 추가: 🎜rrreee🎜2. 패키지 파일 변경🎜

🎜이 단계는 필요하지 않습니다. 여기서는 이름을 jimmy로 통합했습니다. code > 그게 다입니다. [관련 튜토리얼 추천: "<a href="https://www.php.cn/course/list/20.html" target="_blank">angular tutorial🎜"]🎜</a>

🎜 angular.json 변경: 🎜rrreee🎜마운트된 파일의 기본 href를 변경 span>🎜 🎜기본적으로 마운트된 파일 index.html은 일반적으로 다음과 같습니다. 🎜rrreee🎜우리는 <base href="/">를 다음으로 변경하려고 합니다. <base href="/jimmy/">. 그러나 마운트 파일을 수동으로 변경할 수는 없습니다. 빌드 후 파일만 변경하면 되므로 package.json 파일에서 이 작업을 수행할 수 있습니다. 다음과 같이 --base-href=/jimmy/를 추가하세요. 🎜rrreee🎜 npm run build를 실행하여 다음에 나오는 jimmy 폴더를 가져옵니다. 패키징 <code>index.html 파일의 code>에 있는 base 태그는 자연스럽게 변경됩니다. 🎜🎜이제 접근하는 프로젝트 접두어를 변경했는데, 접근을 위해 서버에 배포하고 싶다면 어떻게 해야 할까요? 🎜

배포 프로젝트

🎜여기에서는 패키지된 jimmy 리소스를 서버에 업로드하고 nginx를 사용했다고 가정합니다. 연기하면서. 🎜

🎜이 프로젝트는 SPA 프로젝트입니다. MPA 프로젝트에 대한 설명은 다음 글에서 다룰 예정입니다. 해당 프로젝트에 사용된 기술은 next.js이니 지켜봐주세요🎜

🎜여기서는 를 변경해야 합니다. >nginx.config server 필드: 🎜rrreee🎜 nginx -s reload를 실행하여 구성을 적용합니다. 프로젝트 jimmy는 http://domain.com/jimmy/index.html를 통해 액세스할 수 있습니다. 🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 소개🎜를 방문하세요! ! 🎜

위 내용은 Angular 프로젝트의 경로에 지정된 액세스 접두사를 추가하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!