前言
項目發布總需要根據具體情況配置打包，Angular CLI 提供了方便的打包工具 “ng build”。其中關于發布路徑的配置有幾樣，這里總結匯總它們。
base-href
它指定的是項目構建的目錄結構，例如設置為 "deploy-test"，最后的打包結果就在 dist/deploy-test 目錄下。
項目新建時，在 index.html 下默認是 <base href="/" rel="external nofollow" >，也就是指定這個應用相對根目錄運行。這時候，頁面的相對路徑會基于這個配置，例如  的實際訪問路徑是 /image/test.png。
它不會改變資源請求路徑：
|
1
2
3
4
5
6
7
|
<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 中配置：
|
1
2
3
4
5
6
7
8
|
"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 為：
|
1
2
3
4
5
6
7
|
<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 或者命令行中配置
|
1
2
3
4
5
6
7
8
|
"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 的默認配置是:
|
1
2
3
4
5
6
7
8
9
10
|
"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發布路徑內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://segmentfault.com/a/1190000039398866
