Penjelasan terperinci tentang cara menambah awalan akses yang ditentukan pada laluan dalam projek Angular-tutorial js-php.cn

Penjelasan terperinci tentang cara menambah awalan akses yang ditentukan pada laluan dalam projek Angular

青灯夜游

Lepaskan： 2023-03-03 19:52:45

ke hadapan

2233 orang telah melayarinya

Bagaimana untuk menambah awalan pada laluan dalam projek Angular? Artikel berikut akan memperkenalkan anda kepada kaedah menambah awalan akses yang ditentukan pada laluan projek Angular Saya harap ia akan membantu anda!

Penjelasan terperinci tentang cara menambah awalan akses yang ditentukan pada laluan dalam projek Angular

Apabila membangunkan berbilang projek, kami berharap dapat mengakses projek yang berbeza melalui laluan awalan yang ditentukan. Contohnya, gunakan awalan /projectA/ untuk mengakses projek A; gunakan awalan /projectB/ untuk mengakses projek B. Bagaimana kita harus menyediakannya?

Rangka kerja yang digunakan di sini ialah Angular, "@angular/core": "~12.1.0"

Tukar awalan projek

Andaikan kami Awalan yang ditambah ialah /jimmy/

1. Tukar awalan penghalaan

dan tambah app.module.ts dalam APP_BASE_HREF fail:

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

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

Salin selepas log masuk

2 Tukar fail berpakej

Langkah ini tidak perlu, kami hanya menyatukan namakan di sini sebagai jimmy Itu sahaja [Cadangan tutorial berkaitan: "tutorial sudut"]

Tukar fail output angular.json:

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

Salin selepas log masuk

3. Tukar href asas fail yang dipasang

Secara lalai, fail yang dipasang index.html biasanya kelihatan seperti ini:

<!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>

Salin selepas log masuk

Kami mahu berubah <base href="/"> menjadi <base href="/jimmy/">. Walau bagaimanapun, kami tidak boleh menukar fail pelekap secara manual. Memandangkan hanya fail pasca binaan perlu ditukar, kita boleh melakukannya dalam fail package.json. Cuma tambah --base-href=/jimmy/, seperti berikut:

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

Salin selepas log masuk

Jalankan npm run build dan teg jimmy dalam fail index.html di bawah folder berpakej base akan berubah secara semula jadi.

Pada ketika ini, kami telah menukar awalan projek yang diakses, jadi apakah yang perlu kami lakukan jika kami mahu menggunakan ia ke pelayan untuk akses?

Projek penyebaran

Diandaikan bahawa saya telah memuat naik sumber jimmy yang dibungkus ke pelayan dan menggunakan nginx sebagai proksi.

Projek ini adalah projek SPA. Penjelasan projek MPA akan diletakkan dalam artikel seterusnya Teknologi projek yang berkaitan adalah next.js, jadi nantikan

Di sini, kita perlu menukar medan nginx.config dalam 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;
  }
}

Salin selepas log masuk

Laksanakan nginx -s reload untuk menjadikan konfigurasi berkuat kuasa. Projek http://domain.com/jimmy/index.html boleh diakses melalui jimmy.

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Pengenalan kepada Pengaturcaraan! !

Atas ialah kandungan terperinci Penjelasan terperinci tentang cara menambah awalan akses yang ditentukan pada laluan dalam projek Angular. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!