要求基于ROOT URL+baseUrl+模块路径修复模块的JS加载

RequireJS loading of modules to be fixed based on ROOT URL + baseUrl + module path

本文关键字：模块 JS 加载 路径 ROOT URL+baseUrl+      更新时间：2023-09-26

嗨，我正在使用requirejs将我的javascript代码组织到AMD模块中，我现在正在使用codeigner构建一个非单页网站，我所做的是我有一个默认的布局html文件，我总是调用它来呈现主体的动态内容，所以我的脚本（调用requirejs并具有数据主属性）被编码在我的布局html页面上。

<script data-main="<?=base_url('assets/js/main.js');?>" src="<?=base_url('assets/js/require.js');?>"></script>

我的main.js是这样的。

requirejs.config({
baseUrl: "assets/js",
paths: {
    jquery: 'vendor/jquery',
    bootstrap: 'vendor/bootstrap',
    datatables: 'vendor/jquery.dataTables'
},
shim: {
    jquery: { exports: '$' },
    datatables: { deps: ['jquery'] }
}
});
requirejs(['bootstrap','datatables'], function(){
})

因此，当我在url上键入"localhost/ci-project/"时，它将加载布局页面和动态主体。在这种情况下，它运行良好。sicne requirejs将正确呈现路径"localhost/ci-project/assets/js/vender/[js-file/module]"

但当我将URL更改为"localhost/ci-project/webre/admin"时。加载模块所需的操作是将baseUrl+模块路径连接到当前URL，在本例中为"localhost/ci-project/webre/admin"，最终结果如下：

"localhost/ci-project/welcome/admin/assets/js/vendor/[module]"，这是错误的。

那么，我如何配置requirejs始终从根url加载，然后将baseUrl值与每个模块的路径连接在一起呢？

解决此问题的方法是从服务器端变量输出baseUrl。

在您的PHP页面中：

<script>
var require = {
    baseUrl: '<?= base_url(); ?>' // Or whatever outputs the full path to your site root
};
</script>
<script data-main="<?=base_url('assets/js/main.js');?>" src="<?=base_url('assets/js/require.js');?>"></script>

在加载RequireJS之前创建require对象可以定义将自动拾取的配置选项。

从main.js内部再次调用require.config()是可以的，它只会添加额外的配置选项，但一定要从中删除baseUrl。

Simon上面的回答在我导航到带参数的路线时起到了帮助作用-到基本url的相对路径出错。我使用的是asp.net mvc，但解决方案完全相同：（_Layout.cs.html）

<script>
    var require = {
        // by default, load any module IDs from
        baseUrl: '@Url.Content("~/Scripts/lib")'
}
</script>
<script data-main="@Url.Content("~/Scripts/application/app.js")" src="@Url.Content("~/Scripts/lib/require.js")"></script>
相关文章：