Rumah >hujung hadapan web >tutorial js >Penjelasan terperinci tentang cara menambah awalan akses yang ditentukan pada laluan dalam projek Angular
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"
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 '@angular/common'; @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?
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!