如何将URL的根路径添加到JS文件的路径中？

Question

因此，我有一个在localhost:XXXXX上运行的web应用程序( XXXXX是端口号)，但是在生产中它在webappurl.com/portal运行。问题是，当我对JS文件使用相对路径时，它认为根URL只是/而不是/portal。

是否有一种方法可以让我检查根路径，比如使用location.pathname，然后将其添加到每个JS文件路径的开头？

例如，以这个为例

<script type="text/javascript" src="/Scripts/example.js"></script>

然后把它改成这个

<script type="text/javascript" src="/portal/Scripts/example.js"></script>

我不想对根路径进行硬编码，主要是因为这不是最佳实践，也是因为根路径在我的dev环境中是不同的，我不希望不断地来回更改路径，或者必须保持文件分离。

Answer 1

虽然“base”元素看起来可能是答案，但问题是，我们正在处理的情况是，基础将根据部署环境四处移动。一种解决方案是在发现环境后引导脚本加载。我在生产中使用了类似的方法：

<script>
  (function (){
    var
      // All the JS files we want to load
      script_list = [ 'foo.js', 'bar.js', 'bang.js' ],
      // Our JS directory
      script_base = '/js/', 
      doc_path    = document.location.pathname,
      base_list   = doc_path.split('/'),
      append_script_tag, base_path, i;

    // pop-off the document name from the location to
    // get the directory only        
    base_list.pop();
    base_path = base_list.join('/');

    // a handy script tag appender function
    append_script_tag = function ( script_url ) {
      var script_obj = document.createElement( 'script' );
      script_obj.src     = script_url;
      script_obj.charset = 'utf8';
      script_obj.type    = 'text/javascript';
      document.body.appendChild( script_obj );
    };

    // now loop through the list of js files and write the script tags
    for ( i = 0; i < script_list.length; i++ ) {
      append_script_tag( base_path + script_base + script_list[ i ] );
    }
  }());
</script>

砰，你完了:)

当然，相对路径总是更好的，如果你可以摇摆它。例如，有时使用本地文件进行测试，但在生产中使用CDN。您可能会根据环境加载不同的库，这种方法是确定所使用的环境的一种方法。

干杯，祝你好运！

Answer 2

查看base标签。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

它使您能够为所有相关文件引用指定基url。

我认为这将证明对你很有帮助;)

Answer 3

带前导斜杠的路径不是相对的，而是绝对的。/只是指向应用程序的根目录或站点的根目录。您可以使用base标记来修改它，有关更多信息，请参见kmiklas答案。

但是，在您的情况下，只要省略前面的斜杠就足够了。