溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

Angular項(xiàng)目中如何給路徑添加指定訪(fǎng)問(wèn)前綴

發(fā)布時(shí)間：2023-03-06 10:29:17 來(lái)源：億速云 閱讀：116 作者：iii 欄目：web開(kāi)發(fā)

這篇“Angular項(xiàng)目中如何給路徑添加指定訪(fǎng)問(wèn)前綴”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“Angular項(xiàng)目中如何給路徑添加指定訪(fǎng)問(wèn)前綴”文章吧。

開(kāi)發(fā)多個(gè)項(xiàng)目的時(shí)候，我們希望能通過(guò)指定的前綴路徑去訪(fǎng)問(wèn)不同的項(xiàng)目。比如，通過(guò)前綴 /projectA/ 去訪(fǎng)問(wèn)項(xiàng)目 A；通過(guò)前綴 /projectB/ 去訪(fǎng)問(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)一一下名稱(chēng)為 jimmy 而已  

更改 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)更改完了訪(fǎng)問(wèn)的項(xiàng)目前綴，那么我們要部署到服務(wù)器上進(jìn)行訪(fǎng)問(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 就可以訪(fǎng)問(wèn)到項(xiàng)目 jimmy 了。

以上就是關(guān)于“Angular項(xiàng)目中如何給路徑添加指定訪(fǎng)問(wèn)前綴”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手