站長(zhǎng)資訊網(wǎng)
Angular項(xiàng)目中怎么給路徑添加前綴？下面本篇文章給大家介紹一下Angular項(xiàng)目路徑添加指定的訪問(wèn)前綴的方法，希望對(duì)大家有所幫助！
開(kāi)發(fā)多個(gè)項(xiàng)目的時(shí)候，我們希望能通過(guò)指定的前綴路徑去訪問(wèn)不同的項(xiàng)目。比如，通過(guò)前綴 /projectA/ 去訪問(wèn)項(xiàng)目 A；通過(guò)前綴 /projectB/ 去訪問(wèn)項(xiàng)目 B。我們應(yīng)該怎么設(shè)置呢？
這里使用的框架是
Angular，"@angular/core": "~12.1.0"
更改項(xiàng)目前綴
假設(shè)我們添加的前綴為
/jimmy/
1. 更改路由前綴
在 app.module.ts 文件中添加 APP_BASE_HREF：
import { APP_BASE_HREF } from '@angular/common'; @NgModule({ providers: [ { provide: APP_BASE_HREF, useValue: "/jimmy/" } ] })
2. 更改打包的文件
這一步非必需，我們這里只是統(tǒng)一一下名稱為
jimmy而已 【相關(guān)教程推薦：《angular教程》】
更改 angular.json 的輸出文件：
{ "projects": { ... { "outputPath": "jimmy" } } }
3. 更改掛載文件的 base href
默認(rèn)情況下，掛載的文件 index.html 一般長(zhǎng)這樣：
<!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/">。但是，我們不能手動(dòng)更改掛載文件。因?yàn)橹灰獦?gòu)建后的文件更改即可，所以我們可以在 package.json 文件中完成這一步。只需要添加 --base-href=/jimmy/ 即可，如下：
"scripts": { "build": "ng build --base-href=/jimmy/" }
運(yùn)行 npm run build 打包后得到的文件夾 jimmy 下的 index.html 文件中的 base 標(biāo)簽自然會(huì)更改。
至此，我們已經(jīng)更改完了訪問(wèn)的項(xiàng)目前綴，那么我們要部署到服務(wù)器上進(jìn)行訪問(wèn)，是要怎么做呢？
部署項(xiàng)目
這里假設(shè)我已經(jīng)將打包后的 jimmy 資源上傳到了服務(wù)器，并且用 nginx 作為代理。
本項(xiàng)目是個(gè) SPA 項(xiàng)目。MPA 項(xiàng)目的講解會(huì)放在下一篇文章，相關(guān)項(xiàng)目使用技術(shù)是
next.js，敬請(qǐng)期待
這里，我們需要更改 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; } }
執(zhí)行 nginx -s reload 使得配置生效。通過(guò) http://domain.com/jimmy/index.html 就可以訪問(wèn)到項(xiàng)目 jimmy 了。
