Require.js loosing url context

问题:

Using this url:

"localhost/app2/app.html"

I would expect require.js to manipulate the paths so that all scripts it loads are prefixed with the context 'app2/'. However, I get a 404 for my app script, and when I look in firebug the browser is trying to retrieve it without the app2 context.

My file structure is:

content
  |-app.html
  |-main.js
  |-app
    |-app.js
    |-main.js
  |-libs
    |-require.js

In app.html I have a single script tag:

<script src="libs/require.js" data-main="app/main" type="text/javascript"></script>

The main.js file has this:

require.config({
    baseUrl: "/",
    paths: {
        xx: "app/app",
        header: "app/views/header",
        footer: "app/views/footer",
        templates: "app/views/templates",
        jquery: "libs/jquery-2.0.3",
        k: "libs/kendo/kendo.core",
        backbone: "libs/backbone",
        marionette: "libs/backbone.marionette",
        wreqr: "libs/backbone.wreqr",
        babysitter: "libs/backbone.babysitter",
        underscore: "libs/underscore",
        text: "libs/text"
    },
    shim: {
        jquery: {
            exports: '$'
        },
        underscore: {
            exports: '_'
        },
        backbone: {
            deps: ['jquery', 'underscore'],
            exports: 'Backbone'
        },
        marionette: {
            deps: ['jquery', 'underscore', 'backbone'],
            exports: 'Marionette'
        }
    }
});

require(["xx"], function (app) {
    app.start();
});

And my app.js looks like this:

define(['jquery', 'underscore', 'backbone', 'marionette'],
function ($, _, Backbone, Marionette) {
    var app = new Backbone.Marionette.Application();

    app.addRegions({
        headerRegion: "#header-region",
        moduleRegion: "#module-region",
        footerRegion: "#footer-region",
        dialogsRegion: "#dialogs-region"
    });

    app.on("initialize:after", function() {
        console.log("Starting App");
        Backbone.history.start();
    });

    return  app;
});

So, when I hit the url in the browser I see the app.html file is loaded first, then require.js is loaded followed by main.js. After that I get a 404 trying to load app.js from localhost/app/app.js -- the app2 context is missing.

I have tried renaming the files, in case require is getting confused (didn't work), and I have tried moving the xx path up and down in the list to see if it's a positional bug (it's not). I have tried using a path for xx starting with ./, and that doesn't work either. I have navigated to the app.js with the browser, on the expected path, and it is happily served by my http server.

At first I thought that this was a path problem, so I read the solutions here on stackoverflow, but it's not a simple path problem, because it is the context that's missing -- the root url -- not the path. AHGA.

回答1:

Ok, I have the answer. I had set the baseUrl to an absolute URL, rather than relative. The correct string is:

baseUrl: './'