本教程第 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)介绍这个问题的解决方案。

ITPub博客

SAP UI5 本地开发时 ui5.yaml 文件对构建 Release 版本应用目录的影响分析试读版

最新文章