如何生成 Angular 8 构建以从子文件夹运行答案

【问题标题】：How to generate Angular 8 build to run from sub folder如何生成 Angular 8 构建以从子文件夹运行
【发布时间】：2019-11-17 21:49:47
【问题描述】：

我正在使用标准 localhost:4200 进行开发。但我也想看看构建是如何工作的。为此，我修改了 angular.json 文件。更改如下所示：

"outputPath": "D:/a_root/dist",

其中 a_root 是所有后端文件和 web.config 所在的应用程序根文件夹。因此，为了不弄乱后端和前端文件，我想将所有前端文件放入子文件夹 /dist。我想做的是这个。我的项目中有一个文件 index.html。我正在将基本标签更改为：

<base href="/dist">

然后我构建应用程序：

ng build --watch=true

并在正确的位置获取 dist 文件夹。然后我将 index.file 从 dist 文件夹复制到 a_root 以运行应用程序。

Index.file 看起来像这样：

<head>
  <base href="/dist/">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="shortcut icon" href="assets/favicon.ico">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" 
   rel="stylesheet"/>
  <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</head>
<body class="app" style="overflow-y: hidden;">
   <script src="runtime.js"></script><script src="polyfills-es5.js" nomodule></script><script 
   src="polyfills.js"></script><script src="styles.js"></script>
   <script src="scripts.js"></script><script src="vendor.js"></script>
   <script src="main.js"></script>
 </body>
</html>

当它作为 localhost/a_root/index.html 运行时，我会立即收到脚本错误，因为它们没有被正确引用。但即使在它们前面加上 dist/ 也有助于加载脚本但无助于运行应用程序。它无法加载第一个 ts 组件。

我在这里做错了什么？

谢谢

【问题讨论】：

您是否尝试使用 CLI 命令更改这些设置，例如更改文件夹、基础等
我正在显示我正在使用的所有命令。你到底有什么想法？
这里有错误：GET localhost:8011/polyfills.jsnet::ERR_ABORTED 404（未找到）16:38:25.620 index.html:37 GET localhost:8011/styles.jsnet::ERR_ABORTED 404（未找到）16： 38:25.621 index.html:37 GET localhost:8011/vendor.js net::ERR_ABORTED 404（未找到） 16:38:25.621 index.html:37 GET localhost:8011/scripts.js net::ERR_ABORTED 404（未找到）16:38:25.622 索引.html:37 GET localhost:8011/main.js net::ERR_ABORTED 404（未找到） 16:38:25.637 index.html:37 GET localhost:8011/vendor.js net::ERR_ABORTED 404（未找到）
还有命令：ng build --watch=true --baseHref=dist --outputPath=D:\a_root\dist。构建完成后，我将 dist/index.html 复制到 a_root 并从那里运行它。和我之前的基本一样。

标签： angular angular-cli

【解决方案1】：

您当然需要更新index.html 中的路径，如果您的dist 文件夹位于/a_root/dist到域根目录，例如：

<script src="/a_root/dist/runtime.js"></script>
<script src="/a_root/dist/polyfills-es5.js" nomodule></script>
<script src="/a_root/dist/polyfills.js"></script>
<script src="/a_root/dist/styles.js"></script>
<script src="/a_root/dist/scripts.js"></script>
<script src="/a_root/dist/vendor.js"></script>
<script src="/a_root/dist/main.js"></script>

之后，您可能应该将index.html 中的<base href="/dist/"> 更新为<base href="/a_root/">，因为这是您的index.html 文件相对于域根目录的位置。 <base href=""> 确保相对 URL（路由路径）在子文件夹中正常工作。

理想的想法，例如在生产环境中，您不会将后端和前端代码混合在同一个文件夹中。

【讨论】：

我喜欢你关于不混合两种内容的想法。但是让我问你这个问题。两个不同的位置不会造成 CORS 问题吗？
似乎我正在让它工作。现在，当我导航到 localhost/a_root/index.html 时，我得到了登录页面，并且 url 显示：localhost/dist/login。那么，它会一直在地址栏中显示 dist 吗？
@Mark 这确实会导致 CORS 错误，但是通过配置您的 Web 服务器的属性（取决于您使用的是哪一个），这个问题很容易解决。这就是大多数带有 SPA 的架构的工作原理。
@Mark 你更新<base href>了吗？但是，是的，如果您从http://localhost/a_root/index.html 提供您的index.html，那么一旦您更新<base url>，'/a_root/' 部分将始终显示。如果您只想要一个干净的http://localhost:8080（使用不同的端口），那么您可以从dist 文件夹中提供角度站点。因此，您的后端将位于http://localhost:80 和角度http://localhost:8080。在生产中，他们将在各自的域中运行每个。如果您只有一个域，并且不想显示端口，那么您要么做子文件夹，要么混合文件/文件夹。
好的，我所做的只是运行了这个命令：ng build --watch=true --baseHref=/dist/ --outputPath=D:\a_root\dist。然后我将 dist/index.html 复制到 a_root 中。运行它并第一次开始加载应用程序。那么，您认为我还需要做什么？