Question

我们正在使用骨干路由，mod_rewrite，requirejs。该应用程序位于文件夹中，而不是Web根目录，因此图像，css和js文件需要相对文件夹引用（如果我们可以使用文件将加载的绝对文件夹）。

当访问带有斜杠的路径时，除非在标题中设置了适当的基本标记，否则没有任何js和css文件正确加载。像这样：

<base href="//localhost/myapp/" />

此解决方案有效。问题是我们需要变量基本标签，以便我们可以拥有代码的开发和生产版本。但是加载带有变量的js文件在没有基本标记的情况下不会工作。

只是为了确保我对骨干做了标准修复。修复可选的斜杠（/）：

routes: {
  'faq(/)':'jumpToText',
  'register(/)':'jumpToForm',
},

在历史记录中设置根

Backbone.history.start({pushState: true, root: "//localhost/myapp/");

问题似乎是无法解决的mod_rewrite问题。所以最后的想法是动态设置基本标签。

Answer 1

我们最终使用JavaScript来解析location.href之外的值。将此代码包装在头部的脚本标记中：

document.write("<base href="+'//'+document.location.host +'/'+ location.href.split('/')[3]+'/'+" />");

在routes.js中做了同样的事情（解析出了uri）

Backbone.history.start({pushState: true, root: "/"+location.href.split('/')[3]});

Answer 2

以下是我必须考虑的协议/主机/端口的有效解决方案

var base = document.createElement('base');
base.href = window.location.protocol + '//' + window.location.hostname + (window.location.port ? ':' + window.location.port : '');
document.getElementsByTagName('head')[0].appendChild(base);

当前在包括IE11（不支持window.location.origin）在内的所有主要浏览器中都可以正常运行

我已经用它制作了一个npm软件包，如果有人感兴趣的话，它还支持在该基本href的末尾添加后缀

https://www.npmjs.com/package/dynamic-base

https://github.com/codymikol/dynamic-base

如何动态设置基本标签？

2 个答案: