Angular?項目路徑添加指定的訪問前綴

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

這篇文章主要為大家介紹了Angular?項目路徑添加指定的訪問前綴方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

前言

開發(fā)多個項目的時候，我們希望能通過指定的前綴路徑去訪問不同的項目。比如，通過前綴 /projectA/ 去訪問項目 A；通過前綴 /projectB/ 去訪問項目 B。我們應(yīng)該怎么設(shè)置呢？

這里使用的框架是 Angular，"@angular/core": "~12.1.0"

更改項目前綴

假設(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 一般長這樣：

<!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/">。但是，我們不能手動更改掛載文件。因為只要構(gòu)建后的文件更改即可，所以我們可以在 package.json 文件中完成這一步。只需要添加 --base-href=/jimmy/ 即可，如下：

"scripts": {
  "build": "ng build --base-href=/jimmy/"
}

運行 npm run build 打包后得到的文件夾 jimmy 下的 index.html 文件中的 base 標(biāo)簽自然會更改。

至此，我們已經(jīng)更改完了訪問的項目前綴，那么我們要部署到服務(wù)器上進行訪問，是要怎么做呢？

部署項目

這里假設(shè)我已經(jīng)將打包后的 jimmy 資源上傳到了服務(wù)器，并且用 nginx 作為代理。

本項目是個 SPA 項目。MPA 項目的講解會放在下一篇文章，相關(guān)項目使用技術(shù)是 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;
  }
}

執(zhí)行 nginx -s reload 使得配置生效。通過 http://domain.com/jimmy/index.html 就可以訪問到項目 jimmy 了。

Thanks for reading.

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

您可能感興趣的文章: