Rumah > Artikel > hujung hadapan web > Penjelasan terperinci tentang cara menambah awalan akses yang ditentukan pada laluan dalam projek Angular

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

青灯夜游ke hadapan: 2023-03-03 19:52:452183semak imbas

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!

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

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"
    }
  }
}

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>

Kami mahu berubah 23aca57e8dd334f7dfd2ef845edc2cf0 menjadi 958c2c5febee91530c7d665e107997d3. 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/"
}

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

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!

nginx json html npm angular JS href http

Kenyataan：

Artikel ini dikembalikan pada:juejin.cn. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Apakah EventLoop? Bagaimana untuk menguji prestasi Node atau pageArtikel seterusnya：Apakah EventLoop? Bagaimana untuk menguji prestasi Node atau page

Artikel berkaitan

Lihat lagi