Angular CLI發(fā)布路徑配置項(xiàng)的示例分析

發(fā)布時(shí)間：2021-03-29 09:28:16 來(lái)源：億速云閱讀：163 作者：小新欄目：開發(fā)技術(shù)

小編給大家分享一下Angular CLI發(fā)布路徑配置項(xiàng)的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

前言

項(xiàng)目發(fā)布總需要根據(jù)具體情況配置打包，Angular CLI 提供了方便的打包工具 “ng build”。其中關(guān)于發(fā)布路徑的配置有幾樣，這里總結(jié)匯總它們。

base-href

它指定的是項(xiàng)目構(gòu)建的目錄結(jié)構(gòu)，例如設(shè)置為 "deploy-test"，最后的打包結(jié)果就在 dist/deploy-test 目錄下。

項(xiàng)目新建時(shí)，在 index.html 下默認(rèn)是 <base href="/" rel="external nofollow" >，也就是指定這個(gè)應(yīng)用相對(duì)根目錄運(yùn)行。這時(shí)候，頁(yè)面的相對(duì)路徑會(huì)基于這個(gè)配置，例如 ![](image/test.png) 的實(shí)際訪問(wèn)路徑是 /image/test.png。

它不會(huì)改變資源請(qǐng)求路徑：

<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>

不過(guò)我們的項(xiàng)目常常放在一個(gè)子目錄下運(yùn)行，例如在 tomcat 的 webapps 下新建一個(gè) “deploy-test” 項(xiàng)目目錄。所以相應(yīng)的，base-href 也要設(shè)置為 “/deploy-test/”。

要注意的是，這里的斜杠（/）必不可少，假設(shè)服務(wù)器子目錄叫 “test”，打包部署情況如下：

test：如果兩頭都不加，baseHref 生效，可以獲取到資源。但應(yīng)用生成的瀏覽器路徑錯(cuò)誤，為 host:port/test/test#/index，刷新頁(yè)面會(huì)找不到 index.html。
/test：只加開頭，baseHref 無(wú)效，資源相對(duì) host:port 根目錄加載，報(bào) 404。
test/：只加結(jié)尾，資源請(qǐng)求路徑為 host:port/test/test/XXX.js，報(bào) 404。
/test/：應(yīng)用生成路徑為 host:port/test/#/index，資源正確加載。

打包時(shí)要修改 base-href，主要有三種方式：

在 index.html 中配置 <base href="XXX" rel="external nofollow" >
采用 CLI 命令行參數(shù)來(lái)配置：ng build --baseHref=/XXX/
在 angular.json 中配置：

 "architect": {
 "build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
  "baseHref": "/kanpm/",
  }
 }
 }

即 baseHref 用以配置應(yīng)用的部署路徑。

deploy-url

如果是將資源和應(yīng)用放在同一個(gè)服務(wù)器目錄下，baseHref 即可，但是如果資源和應(yīng)用在不同位置呢？
例如，應(yīng)用部署在 "/app" 目錄下，資源文件放在 ”/app/resource“；又或者想要通過(guò) cdn（如 cdn.example.com）托管加速應(yīng)用的各種資源，同時(shí)在自己服務(wù)器上部署應(yīng)用本身。

配置 deploy-url 會(huì)在打包時(shí)修改資源請(qǐng)求路徑，例如 --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)，最后打包后路徑就會(huì)便變?yōu)?”/app/resource/test.png“。

相應(yīng)的，它也可以在 angular.json 或者命令行中配置

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

或者 ng build --deploy-url="/test/"

?注意：deploy-url 只能修改被打包的資源文件。

樣式資源引入

設(shè)置了 base-href 之后，樣式文件中引入的資源路徑的行為在各個(gè) CLI 的版本下會(huì)有不同：

2~7 版本下會(huì)自動(dòng)添加 base 路徑。例如 url("/assets/path/to/my/asset.png")，會(huì)自動(dòng)在前面疊加 base-href。
8 版本臨時(shí)新增了 --rebase-root-relative-css-urls=true 命令行參數(shù)，可以保持和之前版本行為一致，方便過(guò)渡，但是下個(gè)版本就廢棄。
9 以后的版本，要求使用相對(duì)路徑來(lái)引入資源路徑，所以組件中的樣式文件引入可以這樣寫（url("~src/assets/path/to/my/asset.png")）。

因?yàn)?baseHref 是一個(gè)運(yùn)行時(shí)的值，用以控制 Angular 應(yīng)用的相對(duì)路徑。不應(yīng)該用來(lái)處理編譯時(shí)的打包行為，針對(duì)打包的依賴管理，應(yīng)該由 webpack 通過(guò)相對(duì)路徑去識(shí)別，也方便對(duì)資源進(jìn)行額外的處理（例如給資源文件名加上 hash 值，確保不會(huì)被緩存）。

?注意：打包時(shí)，會(huì)導(dǎo)致需要打包資源會(huì)被 webpack 復(fù)制一份放入 dist 根目錄（assets 文件夾中也還存在一份原版）。所以樣式或組件中引入的文件，應(yīng)該放在 assets 目錄外，因?yàn)?CLI 創(chuàng)建項(xiàng)目時(shí)，angular.json 的默認(rèn)配置是:

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

可以看到，默認(rèn)配置中，assets 文件夾中的文件，都會(huì)不經(jīng)打包直接復(fù)制到 dist 文件夾中（我個(gè)人覺得 Nuxt 的目錄命名，叫 statics 靜態(tài)文件夾就更貼切）。需要在組件中 import，或者樣式文件中以相對(duì)路徑引入的文件，就放另一個(gè)文件夾，不需要在 angular.jsn 中配置，以免打包后存在重復(fù)文件。

總結(jié)

我們可以試著把它們配合使用來(lái)總結(jié)一下：

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

得到編譯打包的 dist/kanpm 文件夾后，我們將所有打包編譯的文件都放入服務(wù)器 kanpm/resource 目錄下，而index.html 和其他直接復(fù)制的靜態(tài)文件，放在服務(wù)器 kanpm/ 目錄下。請(qǐng)求 host:port/kanpm 就會(huì)發(fā)現(xiàn)項(xiàng)目就成功運(yùn)行了！

由此可以看出，base-href 決定的是應(yīng)用的部署位置，也就是用戶通過(guò)什么路徑能夠訪問(wèn)這個(gè)網(wǎng)站。而 deploy-url 決定的是打包后的資源文件（圖片，字體，js等）被部署在哪里，可以如上示例是應(yīng)用的子目錄下，也可以是某個(gè) cdn 服務(wù)器中。

以上是“Angular CLI發(fā)布路徑配置項(xiàng)的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

Angular CLI發(fā)布路徑配置項(xiàng)的示例分析

前言

base-href

deploy-url

樣式資源引入

總結(jié)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽