Angular項(xiàng)目中如何給路徑添加指定訪問前綴
這篇“Angular項(xiàng)目中如何給路徑添加指定訪問前綴”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“Angular項(xiàng)目中如何給路徑添加指定訪問前綴”文章吧。
“只有客戶發(fā)展了，才有我們的生存與發(fā)展！”這是成都創(chuàng)新互聯(lián)的服務(wù)宗旨！把網(wǎng)站當(dāng)作互聯(lián)網(wǎng)產(chǎn)品，產(chǎn)品思維更注重全局思維、需求分析和迭代思維，在網(wǎng)站建設(shè)中就是為了建設(shè)一個(gè)不僅審美在線，而且實(shí)用性極高的網(wǎng)站。創(chuàng)新互聯(lián)對(duì)成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)站開發(fā)、網(wǎng)頁設(shè)計(jì)、網(wǎng)站優(yōu)化、網(wǎng)絡(luò)推廣、探索永無止境。
開發(fā)多個(gè)項(xiàng)目的時(shí)候，我們希望能通過指定的前綴路徑去訪問不同的項(xiàng)目。比如，通過前綴 /projectA/ 去訪問項(xiàng)目 A；通過前綴 /projectB/ 去訪問項(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而已
更改 angular.json 的輸出文件：
{
"projects": {
...
{
"outputPath": "jimmy"
}
}
}
3. 更改掛載文件的 base href
默認(rèn)情況下，掛載的文件 index.html 一般長這樣：
我們是要將 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)更改完了訪問的項(xiàng)目前綴，那么我們要部署到服務(wù)器上進(jì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 使得配置生效。通過 http://domain.com/jimmy/index.html 就可以訪問到項(xiàng)目 jimmy 了。
以上就是關(guān)于“Angular項(xiàng)目中如何給路徑添加指定訪問前綴”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
分享文章：Angular項(xiàng)目中如何給路徑添加指定訪問前綴
文章起源：http://m.jiaotiyi.com/article/igehpi.html