Angular?項(xiàng)目路徑添加指定的訪(fǎng)問(wèn)前綴

更新時(shí)間：2023年03月03日 08:34:35 作者：Jimmy

這篇文章主要為大家介紹了Angular?項(xiàng)目路徑添加指定的訪(fǎng)問(wèn)前綴方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jì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 lang="en">
<head>
  <meta charset="utf-8">
  <title>Jimmy</title>
  <base href="/" rel="external nofollow" >
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="logo.png" rel="external nofollow" >
</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 了。

Thanks for reading.

以上就是Angular 項(xiàng)目路徑添加指定的訪(fǎng)問(wèn)前綴的詳細(xì)內(nèi)容，更多關(guān)于A(yíng)ngular 路徑訪(fǎng)問(wèn)前綴的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: