Require.js加载data-main脚本失败：路径错误问题排查求助

核心原因 #

1. 脚本加载顺序错误，config生效时机滞后
   Require.js加载完成后会立即异步启动data-main指定脚本的加载，而你的dummy-requirejs-config.js是在Require.js之后通过同步标签加载的。即便同步脚本会在异步请求完成前执行，但你给data-main使用了绝对路径，后续设置的baseUrl与该路径产生冲突——Require.js处理绝对路径的data-main时，会错误地将其与baseUrl结合，导致路径截断。

2. 匿名模块触发MIME类型检查错误
   dummy-instance.js用define({...})定义了匿名对象模块，部分服务器会将这类内容识别为JSON，返回application/json的MIME类型，触发浏览器严格MIME类型检查报错。

解决方法 #

方法一：将config合并到data-main脚本中（推荐） #

把配置代码直接放到dummy-instance.js顶部，确保config先生效，同时避免加载顺序问题：

修改/js/page/dummy-instance.js：

require.config({
    baseUrl: 'js'
});

define({
    a: "a",
    b: "b"
});

修改dummy.html，移除单独的config脚本：

<!DOCTYPE html>
<html lang="en">
    <body>
        <p>Hello World</p>
        <script data-main="/js/page/dummy-instance" src="https://requirejs.org/docs/release/2.3.7/comments/require.js"></script>
    </body>
</html>

方法二：在Require.js加载前提前定义config #

通过全局require对象预配置，让Require.js加载时直接读取配置：

修改dummy.html：

<!DOCTYPE html>
<html lang="en">
    <body>
        <p>Hello World</p>
        <script>
            // 提前定义全局配置，Require.js加载时自动读取
            var require = {
                baseUrl: 'js'
            };
        </script>
        <script data-main="page/dummy-instance" src="https://requirejs.org/docs/release/2.3.7/comments/require.js"></script>
    </body>
</html>

这里data-main改用相对路径page/dummy-instance，结合baseUrl: 'js'，会自动拼接为正确的js/page/dummy-instance.js路径。

方法三：调整config与Require.js的加载顺序 #

保留单独config文件的前提下，将config脚本移到Require.js之前，并调整data-main为相对路径：

修改dummy.html：

<!DOCTYPE html>
<html lang="en">
    <body>
        <p>Hello World</p>
        <script src="js/dummy-requirejs-config.js"></script>
        <script data-main="page/dummy-instance" src="https://requirejs.org/docs/release/2.3.7/comments/require.js"></script>
    </body>
</html>

额外注意事项 #

• 确保服务器将.js文件的MIME类型正确设置为application/javascript，避免因类型不匹配导致执行错误。
• 优先使用相对路径配合baseUrl的方式定义模块路径，更符合Require.js的模块加载逻辑。

内容的提问来源于stack exchange，提问作者0xff