Question

我有一个基于此示例的多页主干应用程序：https://github.com/asciidisco/grunt-requirejs/tree/master/examples/multipage-shim并且它对基本URL工作正常。当我导航到不再位于域根目录的页面时，问题就出现了。

目录结构如下所示：

scripts
  ├── app
  │   ├── controller
  │   │   ├── Base.js
  │   │   ├── c1.js
  │   │   └── c2.js
  │   ├── lib.js
  │   ├── main1.js
  │   ├── main2.js
  │   ├── model
  │   │   ├── Base.js
  │   │   ├── m1.js
  │   │   └── m2.js
  ├── common.js
  ├── page1.js
  └── page2.js

所以，例如如果我导航到http://localhost/，则所有内容都会使用以下脚本标记正确加载：

    <script data-main="/scripts/page1"  src="/path/to/require.js">

（这会加载page1，后者又加载common.js和main1.js）。

但是，如果我导航到http://localhost/another/url/，那么相同的脚本标记会成功加载page1.js和common.js，但是当它尝试加载main1.js时，我得到一个404，因为它是从相对网址（尝试加载http://localhost/another/url/scripts/app/main1.js。

我的baseUrl设置为'scripts'，我正在使用grunt（https://github.com/asciidisco/grunt-requirejs）进行构建。

page1.js的内容就是这样：

//Load common code that includes config, then load the app logic for this page.
require(['./common'], function (common) {
    require(['app/main1']);
});

Answer 1

对于任何绊倒这个问题的人，我发现了这个解决方法：

require.js支持两个单独的baseUrl参数，一个用于构建步骤，另一个用于部署的javascript。

通过设置build baseUrl: 'scripts'和部署的baseUrl: '/scripts'，我能够确保require始终尝试从服务器上的根目录中获取脚本。

在多页面应用中更正网址

1 个答案: