Angular CLI釋出路徑的配置項淺析
前言
專案釋出總qMqVJIH需要根據具體情況配置打包，Angular CLI 提供了方便的打包工具 “ng build”。其中關於釋出路徑的配置有幾樣，這裡總結匯總它們。
base-href
它指定的是專案構建的目錄結構，程式設計客棧例如設定為 "deploy-test"，最後的打包結果就在 dist/deploy-test 目錄下。
專案新建時，在 index.html 下預設是 <base href="/" rel="external nofollow" >，也就是指定這個應用相對根目錄執行。這時候，頁面的相對路徑會基於這個配置，例如  的實際訪問路徑是 /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，主要有三種方式：
- 在 index.html 中配置 <base href="XXX" rel="external nofollow" >
- 採用 CLI 命令列引數來配置：ng build --baseHref=/XXX/
- 在 angular.json 中配置：
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser","options": {
"baseHref": "/kanpm/",}
}
}
即 baseHref 用以配置應用的部署路徑。
deploy-url
如果是將資源和應用放在同一個伺服器目錄下，baseHref 即可，但是如果資源和應用在不同位置呢？
例如，應用部署在 "/app" 目錄下，資原始檔放在 ”/app/resource“； 又或者想要通過 cdn（如 cdn.http://www.cppcns.comexample.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>
又例如有圖片 ，最後打包後路徑就會便變為 ”/app/resource/test.png“。
相應的，它也可以在 angular.json 或者命令列中配置
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser","options": {
"dqMqVJIHeployUrl": "/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釋出路徑內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！