本教程第 40 步驟，筆者介紹瞭如何製作 SAP UI5 應用能夠部署到 Web 伺服器上的 Release 版本(或者稱作 Distribution 版本)，即如何用工具自動生成 component-preload.js 檔案：

[SAP UI5 應用開發教程之四十 - 如何製作包含了 component-preload.js 在內的 SAP UI5 釋出版本](https://jerry.blog.csdn.net/article/details/123071595)

有讀者現學現用，馬上使用第九個步驟資料夾裡的原始碼做了嘗試，但是卻發現了問題：

> 為什麼我將程式碼部署在了本地tomcat上，也把dist資料夾挪進去了，執行還是會載入兩次Component-preload.js，也會載入Component.js，並且報錯404，使用的是第九篇教程Component的程式碼。 報錯：failed to load JavaScript resource: sap/ui5/walkthrough/Component-preload.js - sap.ui.ModuleSystem

本文筆者就帶著大家一起來分析這個問題。

# 問題分析

首先我們回憶一下步驟 40 介紹的知識：package.json 定義了名叫 build 的指令碼，執行命令列為 `ui5 build --clean-dest`：

![](https://img-blog.csdnimg.cn/img_convert/f3339bf1528515d4286b70f0d104781e.png)

於是我們可以透過 `npm run build` 命令列來執行這個指令碼，對 SAP UI5 應用原始碼進行 build(構建):

![](https://img-blog.csdnimg.cn/img_convert/e45e8f0de68bcb5f874145d8e039278d.png)

成功構建後，在當前目錄生成一個 dist 資料夾：
![](https://img-blog.csdnimg.cn/img_convert/fbbdd4fa888b558b62c59f19bda7fe94.png)

dist 資料夾裡包含有構建之後自動生成的 `Component-preload.js` 檔案。大家仔細觀察 dist 資料夾裡的子資料夾，發現這些子資料夾都來自原來的 `webapp` 資料夾裡的子資料夾。並且極其重要的一點：`dist` 資料夾下面，不再存在 `webapp` 這個資料夾了！請記住我們觀察到的這一點。

我們把 dist 資料夾複製到 tomcat 的 webapps 資料夾下，啟動 tomcat 伺服器，透過 url `http://localhost:8080/dist/` 即可訪問這個構建之後的 SAP UI5 應用，也能觀察到 `Component-preload.js` 檔案被載入了。實際上，`http://localhost:8080/dist/` 指向的是 `http://localhost:8080/dist/index.html`.

![](https://img-blog.csdnimg.cn/img_convert/d9b2e92a7cf5ea4bc1629f087ec607cb.png)

我們再來到出問題的 09 資料夾。

為了不影響原始的 09 步驟，我把 09 資料夾原封不動地複製了一份，重新命名為 09-build.

我在 09-build 資料夾下的 `package.json` 裡也增添了一個 `build` 指令碼，然後執行 `npm run build`:

![](https://img-blog.csdnimg.cn/img_convert/e6995a60e0b9702752c921ccf3acc3d9.png)

![](https://img-blog.csdnimg.cn/img_convert/d106fe00b410bbd47247331fd1ed51b1.png)

構建之後的 index.html 和 Component-preload.js 檔案，出現在構建後生成的 dist 資料夾的 webapp 資料夾內。
![](https://img-blog.csdnimg.cn/img_convert/ba2d953bc4d4d18595f8aa204ac65f38.png)

可想而知，當我們把這個結構的 dist 資料夾複製到 tomcat 的 webapps 資料夾下時，我們訪問 http://localhost:8080/dist/ 是不可能正常工作的，因為如今 index.html 是放在 `/dist/webapp` 下面，而不是像步驟 40 那樣，直接放在 `/dist/` 下面。

就算我們把訪問 tomcat 的 url，手動新增上 `webapp`，即 `http://localhost:8080/dist09/webapp/` (請忽略這裡的 dist22 ，我將步驟 40 的 dist 資料夾放到了 tomcat 的 webapps 資料夾，將 09-build 構建出來的 dist，重新命名成 dist09，然後同樣放置到了 tomcat webapps 資料夾下 )，Component-preload.js 也沒有辦法成功載入。

本文[餘下部分](https://jerry.blog.csdn.net/article/details/127638779)介紹這個問題的解決方案。

SAP UI5 本地開發時 ui5.yaml 檔案對構建 Release 版本應用目錄的影響分析試讀版

相關文章