Question

您好我正在使用requirejs将我的javascript代码组织到AMD模块中，我正在使用codeigniter构建一个非单页网站，我所做的是我有一个默认布局html文件，我总是打电话给渲染主体的动态内容，以便调用requirejs并具有data-main属性的脚本在我的布局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(){

})

所以当我输入我的网址“localhost / ci-project /”时，它会将动态主体加载到布局页面。在这种情况下，它工作正常。 sicne requirejs将正确呈现路径“localhost / ci-project / assets / js / vendor / [js file / module]”

但当我更改URL时，请说'localhost / ci-project / welcome / admin'。 requirejs加载模块的做法是将baseUrl +模块路径连接到当前URL，在本例中为'localhost / ci-project / welcome / admin'，结束结果如下：

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

那么如何配置requirejs以始终从根URL加载，然后将baseUrl值与每个模块的路径连接起来？

Answer 1

解决此问题的方法是从服务器端变量输出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对象允许您定义将自动拾取的配置选项。

从require.config()内部再次呼叫main.js很好，它只会添加其他配置选项，但请务必从那里删除baseUrl。

Answer 2

当我遇到导航到带参数的路径的问题时，上面的Simon的回答有所帮助 - 基本URL的相对路径出错了。我使用的是asp .net mvc，但解决方案完全相同：（_Layout.cshtml）

<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>

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

2 个答案: