日韩成人在线电影,欧美日韩在线观看一区,午夜日韩精品

前言

項目發布總需要根據具體情況配置打包，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，主要有三種方式：

在 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.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 中配置，以免打包后存在重復文件。