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

Posted on by

前言

項目發佈總需要根據具體情況配置打包，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！

推薦閱讀：

    None Found