SAPUI5应用加载demo.view.js报404 Not Found错误如何解决

我正在尝试开发一个简单的SAPUI5 Hello World应用，使用的开发环境为Eclipse 2020-12 IDE。运行应用时，我右键点击index.html文件，选择Run As -> Web App Preview选项进行Web应用预览，在浏览器中打开应用时，控制台输出如下报错信息：

Uncaught Error: failed to load 'WebContent/myapp/demo.view.js' from resources/WebContent/myapp/demo.view.js: 404 - Not Found

项目中相关文件的代码如下：

相关文件代码 #

/myApp/src/main/webapp/index.html #

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>

        <script src="resources/sap-ui-core.js"
                id="sap-ui-bootstrap"
                data-sap-ui-libs="sap.m"
                data-sap-ui-theme="sap_bluecrystal">
        </script>
        <!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->

        <script>
                sap.ui.localResources("myapp");
                var app = new sap.m.App({initialPage:"iddemo1"});
                var page = sap.ui.view({id:"iddemo1", viewName:"WebContent.myapp.demo", type:sap.ui.core.mvc.ViewType.JS});
                app.addPage(page);
                app.placeAt("content");
        </script>

    </head>
    <body class="sapUiBody" role="application">
        <div id="content"></div>
    </body>
</html>

/myApp/WebContent/myapp/demo.view.js #

sap.ui.jsview("WebContent.myapp.demo", {

    /** Specifies the Controller belonging to this View. 
    * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
    * @memberOf WebContent.myapp.demo
    */ 
    getControllerName : function() {
        return "WebContent.myapp.demo";
    },

    /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed. 
    * Since the Controller is given to this method, its event handlers can be attached right away. 
    * @memberOf WebContent.myapp.demo
    */ 
    createContent : function(oController) {
        return new sap.m.Page({
            title: "Hello World",
            content: [
            
            ]
        });
    }

});

/myApp/WebContent/myapp/demo.controller.js #

sap.ui.controller("WebContent.myapp.demo", {

/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf WebContent.myapp.demo
*/
//  onInit: function() {
//
//  },

/**
* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
* @memberOf WebContent.myapp.demo
*/
//  onBeforeRendering: function() {
//
//  },

/**
* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
* @memberOf WebContent.myapp.demo
*/
//  onAfterRendering: function() {
//
//  },

/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf WebContent.myapp.demo
*/
//  onExit: function() {
//
//  }

});

出现404资源加载错误是两个配置问题共同导致的：

• 项目目录结构不统一：当前index.html存放在/myApp/src/main/webapp/路径下，但视图、控制器文件放在/myApp/WebContent/myapp/路径，二者不属于同一个Web服务根目录，服务端无法跨目录检索到对应资源。
• 资源命名空间配置错误：代码里给视图、控制器名称加了WebContent前缀，SAPUI5加载模块时会自动将命名空间中的点替换为路径分隔符，会主动请求resources/WebContent/myapp/下的文件，但WebContent是Eclipse Web类型项目的默认根目录标识，不属于业务资源的命名空间范围。

按以下步骤调整即可正常运行：

• 统一项目目录结构：将myapp文件夹整体移动到/myApp/src/main/webapp/目录下，保证index.html和myapp文件夹处于同一层级，调整后视图路径为/myApp/src/main/webapp/myapp/demo.view.js，控制器路径为/myApp/src/main/webapp/myapp/demo.controller.js。
• 修正所有资源命名，删除多余的WebContent.前缀：
  • 将index.html中视图加载配置viewName:"WebContent.myapp.demo"修改为viewName:"myapp.demo"
  • 将demo.view.js中的视图定义名从"WebContent.myapp.demo"修改为"myapp.demo"，同时将getControllerName方法的返回值同步修改为"myapp.demo"
  • 将demo.controller.js中的控制器定义名从"WebContent.myapp.demo"修改为"myapp.demo"
• 清理浏览器缓存后，重新使用Web App Preview运行应用即可正常加载。

内容的提问来源于stack exchange，提问作者Gp Master