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

2024-05-09 • 问答

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

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

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

<base href="/dist">

然后我构建应用程序：

ng build --watch=true

并在正确的位置获取dist文件夹。然后，我将dist文件夹中的index.file复制到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组件。

我在这里做什么错了？

谢谢

您肯定需要更新index.html中的路径，如果所有{{1}都以.js为前缀，则将所有引用的.css，/a_root/dist/和其他文件加上前缀}}文件夹相对于域根目录位于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>中的<base href="/dist/">更新为<base href="/a_root/">，因为这是您的index.html文件相对于域根目录所在的位置。 index.html确保相对URL（路由路径）在子文件夹中正常工作。

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

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

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

大家都在问