logo标签列表

如何在AngularJS中指定相对路径的基本URL

javascripthtmlcssangularjs
4

我遇到了与AngularJS路由相关的问题。我有一个特定的文件夹结构。

js -> Angular -> 
css -> Bootstrap ->
index.html

当在像IIS这样的服务器上托管时，所有路由都运行正常。但是，如果我将整个指令复制并粘贴到其他位置或与他人共享，则如果使用文件系统运行，就会开始出现“找不到文件”的错误。

这是我的index.html文件的外观。

<!DOCTYPE html>
<html>
  <head>
     <meta name="viewport" content="width=device-width" />
      <base href="" />
      <!--css-->
    <link href="./css/Bootstrap/bootstrap.min.css" rel="stylesheet" />
</head>
<body ng-app="myApp">
<div class="container-fluid">
    <!--content-->
    <!--menu tabs-->
    <div class="col-md-12" style="margin-top:10px;">
     <a href="/car"> CAR</a> <br/>
     <a href="/mobile">Mobile</a>
    </div>
    <!--angular template placeholder-->
    <div ng-view> </div>
    <!--footer-->
</div>
<!--js-->
<script src="./js/Angular/Lib/angular.js"></script>
<script src="./js/Angular/Lib/angular-route.js"></script>
<script src="./js/Angular/Config/ngRouteConfig.js"></script>

当HTML中存在base标签时，才会出现这个404错误。如果我删除它，页面就会正常渲染。但是这会导致Angular无法路由。

我的上级给我发送了一封电子邮件，告诉我不应该指定绝对路径，但我在我的index.html中没有找到任何指定绝对路径的地方。

那么我该如何指定相对路径，以便具有相同文件夹结构的任何人都可以运行演示应用程序？

非常感谢任何帮助/建议。

2个回答
2
你尝试过吗：
<base href="/" />

如果您将应用程序部署到根上下文中(例如https://myapp.com/)，请将基本URL设置为/：
<head>
  <base href="/">
  ...
</head>

如果您将应用部署到子上下文中（例如https://myapp.com/subapp/），请将基本URL设置为子上下文的URL。
<head>
  <base href="/subapp/">
  ...
</head>

Angular文档 $location/nobase

Angular文档 $location

关于绝对路径，<a href="/car"> CAR</a>并不是完全的绝对路径，但它确实强制浏览器回到Web服务器的ROOT目录查找路由。因此，如果您共享应用程序到子目录中，则这很可能会导致错误。

在这种情况下，他们应该在他们的Web服务器上设置<base href="放置应用程序的位置" />，或者您应该指定在Web服务器的ROOT目录中运行它。

1

使用：

<!DOCTYPE html>
<html>
  <head>
      <meta name="viewport" content="width=device-width" />
      <!--
      <base href="" />
      -->
      <script>
        document.write('<base href="' + document.location + '" />');
      </script>

      <!--css-->
    <link href="./css/Bootstrap/bootstrap.min.css" rel="stylesheet" />
</head>
我做的和你一样来满足我的需求;) 我正要分享这个。谢谢 - Kgn-web
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接