Angular CLI發佈路徑的配置項淺析

前言

項目發佈總需要根據具體情況配置打包,Angular CLI 提供瞭方便的打包工具 “ng build”。其中關於發佈路徑的配置有幾樣,這裡總結匯總它們。

base-href

它指定的是項目構建的目錄結構,例如設置為 “deploy-test”,最後的打包結果就在 dist/deploy-test 目錄下。

項目新建時,在 index.html 下默認是 <base href=”/” rel=”external nofollow” >,也就是指定這個應用相對根目錄運行。這時候,頁面的相對路徑會基於這個配置,例如 ![](image/test.png) 的實際訪問路徑是 /image/test.png。

它不會改變資源請求路徑:

<body>
 <app-root></app-root>
 <script src="runtime.js"></script>
 <script src="polyfill.js"></script>
 <script src="styles.js"></script>
 <script src="main.js"></script>
</body>

不過我們的項目常常放在一個子目錄下運行,例如在 tomcat 的 webapps 下新建一個 “deploy-test” 項目目錄。所以相應的,base-href 也要設置為 “/deploy-test/”。

要註意的是,這裡的斜杠(/)必不可少,假設服務器子目錄叫 “test”,打包部署情況如下:

  • test:如果兩頭都不加,baseHref 生效,可以獲取到資源。但應用生成的瀏覽器路徑錯誤,為 host:port/test/test#/index,刷新頁面會找不到 index.html。
  • /test:隻加開頭,baseHref 無效,資源相對 host:port 根目錄加載,報 404。
  • test/:隻加結尾,資源請求路徑為 host:port/test/test/XXX.js,報 404。
  • /test/:應用生成路徑為 host:port/test/#/index,資源正確加載。

打包時要修改 base-href,主要有三種方式:

  1. 在 index.html 中配置 <base href=”XXX” rel=”external nofollow” >
  2. 采用 CLI 命令行參數來配置:ng build –baseHref=/XXX/
  3. 在 angular.json 中配置:
 "architect": {
 "build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
  "baseHref": "/kanpm/",
  }
 }
 }

即 baseHref 用以配置應用的部署路徑。

deploy-url

如果是將資源和應用放在同一個服務器目錄下,baseHref 即可,但是如果資源和應用在不同位置呢?
例如,應用部署在 “/app” 目錄下,資源文件放在 ”/app/resource“; 又或者想要通過 cdn(如 cdn.example.com)托管加速應用的各種資源,同時在自己服務器上部署應用本身。

配置 deploy-url 會在打包時修改資源請求路徑,例如 –deploy-url=/app/resource/,則最後打包的 index.html 為:

<body>
 <app-root></app-root>
 <script src="/app/resource/runtime.js"></script>
 <script src="/app/resource/polyfill.js"></script>
 <script src="/app/resource/styles.js"></script>
 <script src="/app/resource/main.js"></script>
</body>

又例如有圖片 ![](test.png),最後打包後路徑就會便變為 ”/app/resource/test.png“。

相應的,它也可以在 angular.json 或者命令行中配置

"architect": {
 "build": {
 "builder": "@angular-devkit/build-angular:browser",
 "options": {
  "deployUrl": "/test/",
 }
 }
}

或者 ng build –deploy-url=”/test/”

✨註意:deploy-url 隻能修改被打包的資源文件。

樣式資源引入

設置瞭 base-href 之後,樣式文件中引入的資源路徑的行為在各個 CLI 的版本下會有不同:

  • 2~7 版本下會自動添加 base 路徑。例如 url(“/assets/path/to/my/asset.png”),會自動在前面疊加 base-href。
  • 8 版本臨時新增瞭 –rebase-root-relative-css-urls=true 命令行參數,可以保持和之前版本行為一致,方便過渡,但是下個版本就廢棄。
  • 9 以後的版本,要求使用相對路徑來引入資源路徑,所以組件中的樣式文件引入可以這樣寫(url(“~src/assets/path/to/my/asset.png”))。

因為 baseHref 是一個運行時的值,用以控制 Angular 應用的相對路徑。不應該用來處理編譯時的打包行為,針對打包的依賴管理,應該由 webpack 通過相對路徑去識別,也方便對資源進行額外的處理(例如給資源文件名加上 hash 值,確保不會被緩存)。

✨註意:打包時,會導致需要打包資源會被 webpack 復制一份放入 dist 根目錄(assets 文件夾中也還存在一份原版)。所以樣式或組件中引入的文件,應該放在 assets 目錄外,因為 CLI 創建項目時,angular.json 的默認配置是:

"architect": {
 "build": {
 ...
 "options": {
  "assets": [
  "src/favicon.ico",
  "src/assets",
  ],
 }
}

可以看到,默認配置中,assets 文件夾中的文件,都會不經打包直接復制到 dist 文件夾中(我個人覺得 Nuxt 的目錄命名,叫 statics 靜態文件夾就更貼切)。需要在組件中 import,或者樣式文件中以相對路徑引入的文件,就放另一個文件夾,不需要在 angular.jsn 中配置,以免打包後存在重復文件。

總結

我們可以試著把它們配合使用來總結一下:

ng build –prod –base-href=”/kanpm/” rel=”external nofollow” –deploy-url=”/kanpm/resource/”

得到編譯打包的 dist/kanpm 文件夾後,我們將所有打包編譯的文件都放入服務器 kanpm/resource 目錄下,而index.html 和其他直接復制的靜態文件,放在服務器 kanpm/ 目錄下。請求 host:port/kanpm 就會發現項目就成功運行瞭!

由此可以看出,base-href 決定的是應用的部署位置,也就是用戶通過什麼路徑能夠訪問這個網站。而 deploy-url 決定的是打包後的資源文件(圖片,字體,js等)被部署在哪裡,可以如上示例是應用的子目錄下,也可以是某個 cdn 服務器中。

到此這篇關於Angular CLI發佈路徑配置項的文章就介紹到這瞭,更多相關Angular CLI發佈路徑內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!