requirejs data-main加载总是失败的问题

最新推荐文章于 2023-04-10 11:58:43 发布

Simple_xhy

最新推荐文章于 2023-04-10 11:58:43 发布

阅读量6.9k

点赞数

CC 4.0 BY-SA版权

分类专栏：学习 web 文章标签：学习 require html data-main

本文链接：https://blog.youkuaiyun.com/u011311295/article/details/50605704

学习同时被 2 个专栏收录

6 篇文章

订阅专栏

web

4 篇文章

订阅专栏

在使用requirejs时遇到data-main加载脚本路径错误的问题，原因是data-main路径相对于baseUrl，而requireConfig.js未确保先加载。通过将requireConfig.js直接放入html，或者采用不优雅的解决方式来避免404错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

刚刚开始接触requirejs，在使用过程中发现了一个问题

<script data-main="/registerMain.js" src="/print/web/public/plugins/require.js"></script>

<script src="/print/web/public/plugins/requireConfig.js"></script>

我一开始用上面的方式来加载脚本模块

因为requirejs使用data-main的方式来加载入口模块，但是这个data-main脚本路径是相对于自定义配置的baseUrl的，我把配置baseUrl的文件抽取出去了，独立成了一个requireConfig.js，在script加载的时候，没有办法保证requirejs内部开始加载data-main模块时候requireConfig脚本已经被加载完成，所以就会经常有下图所示的问题，data-main文件总是报404

后来研究了一下新浪微博的解决方式，发现他们是这么来的

    //noinspection JSUnresolvedVariable
    require.config({
        baseUrl: 'http://h5.sinaimg.cn/weibocn/v6/js/',
        paths: {
            'jquery': 'http://h5.sinaimg.cn/weibocn/v6/js/lib/jquery2-3a24ecb46cb1716600660086a85ad0b0.js',
            'card/cards': 'http://h5.sinaimg.cn/weibocn/v6/js/card/cards-e0518abc72cc7f1a067220b4d8fd2d4e.js',
            'act/acts': 'http://h5.sinaimg.cn/weibocn/v6/js/act/acts-e6f88f617cbab657bbc09d202e91c23c.js',
            'tpl/mod/mods.all': 'http://h5.sinaimg.cn/weibocn/v6/js/tpl/mod/mods.all-baa8aa348c8f1d67a4f598567ef08f83.js',
            'mod/mods.all': 'http://h5.sinaimg.cn/weibocn/v6/js/mod/mods.all-7355ca37ddb6c1be526292ea6b441ec5.js',
            'ctrl/home': 'http://h5.sinaimg.cn/weibocn/v6/js/ctrl/home-1fe91b48de79da46920de8d6624260f6.js'
        }
    });

直接写在页面上~

好吧，折中一下

<script data-main="/registerMain.js" src="/print/web/public/plugins/require.js"></script>
    <script>
    	requirejs.config({
		    baseUrl: '/print/web/public/src/js'
		});
    </script>
    <script src="/print/web/public/plugins/requireConfig.js"></script>

用了这个方法算是非常不优雅的解决了这个问题。。。

记录一下这个坑，防止到时候自己忘记了`