Angular專案中怎麼能為路徑加上前綴？以下這篇文章為大家介紹Angular專案路徑添加指定的訪問前綴的方法，希望對大家有幫助！
開發多個專案的時候，我們希望能透過指定的前綴路徑去存取不同的專案。例如，透過前綴 /projectA/ 去存取項目 A；透過前綴 /projectB/ 去存取項目 B。我們該怎麼設定呢？
這裡使用的框架是
Angular，"@angular/core": "~12.1.0"
假設我們新增的前綴為
/jimmy/
##1.更改路由前綴
在app.module.ts 檔案中新增APP_BASE_HREF：
import { APP_BASE_HREF } from '@angular/common';
@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>
變成。但是，我們不能手動更改掛載檔案。因為只要建置後的檔案變更即可，所以我們可以在 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專案中怎麼給路徑添加指定訪問前綴的詳細內容。更多資訊請關注PHP中文網其他相關文章！
