运行 ng build 时，index.html 啥都不做？

Posted 2023-03-15

【中文标题】运行 ng build 时，index.html 啥都不做？

【英文标题】：When running ng build, the index.html does nothing?运行 ng build 时，index.html 什么都不做？

【发布时间】：2019-01-14 00:38:30

【问题描述】：

我有一个 Angular 5 项目，它在运行 ng serve 时运行良好，但我想将它发送给设计师以进一步处理它。运行 ng build 后，打开 index.html 会导致页面完全空白。

我还有什么需要做的吗？在我的 environment.ts 文件夹中，我将生产设置为 true。请让我知道是否有更简单的方法来发送模拟或如何修复这个，谢谢！

【问题讨论】：

你能分享更多你遇到的错误吗？

我没有出错，html 文件只是空白。我的 Angular 5 项目由各种页面组成，每个页面都由组件组成。 ng serve 与网站完美配合并在页面之间跳转，但对于 ng build，当我打开它在我的 dist 文件夹中创建的 index.html 文件时，它只会打开一个空网页而不是我的网站。

【参考方案1】：

简单的技巧就是从 index.html 的 <base href="/"> 行中删除 / 将行 <base href="/"> 更改为 <base href="">

【讨论】：

救我一命，但不知道为什么，你能解释一下吗？

@TonyLucas Angular 使用基本 href 来告诉路由器如何编写导航 URL。如果您的应用程序存在于根目录，那么您可以使用 / 作为 href 值，如下所示。

【参考方案2】：

很可能是<base href=""> 设置。假设我们有一个名为“foo”的 angular-cli-created 项目。当我们运行ng build --prod 时，默认情况下，Angular 会输出dist/foo 而不会出现任何终端错误。有几点：

这需要放在服务器上，不能通过简单地打开 index.html 来工作。

我们的<base href=""> 需要反映它是如何放在服务器上的（即，将“foo”文件夹与服务器上的其他项目/目录一起添加，或者将 foo 的所有内容转储到服务器的根目录中）。

因此，对于我们的示例，假设我们要将“foo”目录复制到本地服务器上，例如 mamp/wamp 与其他项目。我们这样做，去 localhost/foo 瞧！还是空白页。如果您查看（Chrome 的）开发控制台，您很可能会看到缺少样式/js 的 404。打开索引文件并将<base href="/"> 更改为<base href="/foo/">，现在它应该可以正常显示了。您也可以保留<base href="/"> 原样并将“foo”添加到所有引发错误的 css/js 文件路径上，这样就可以了。

既然我们知道问题出在哪里，我们如何在项目中进行设置？在项目的根目录中，我们打开 angular.json (NG6) 并修改此位以添加 baseHref 和 deployUrl 键/值：

  "architect": 
    "build": 
      "builder": "@angular-devkit/build-angular:browser",
      "options": 
        "baseHref" : "/foo/",
        "deployUrl": "/foo/",

现在，当我们保存并进行另一个构建，并在服务器上替换之前的构建时，一切都会显示出来。您也可以在构建时使用标志进行设置。来自文档：

# Sets base tag href to /myUrl/ in your index.html
ng build --base-href /myUrl/

【讨论】：

只是为了确认一下，baseHref 是否相对于您的 Web 服务器的根目录，而不是文件系统上的根文件夹？即如果我的索引和 js 文件在 /root/myapp/dist/myapp 下并且我运行 http-server -p 4200 /root/myapp/dist/myapp 那么 baseHref 是 / 而不是 '/root/myapp/dist/myapp/'？

我已按照这些步骤操作，但是我的网页没有显示。它只显示图标，如你所说，404 样式。我刚刚将“/project/”添加到基本 href，但它不起作用。有什么建议吗？

【参考方案3】：

项目中的index.html 不是您在服务器上部署的实际index.html。您必须使用ng build --prod 生成您需要在网络服务器中部署的文件。

但是，即使您构建了生产文件，您的设计师仍然无法对生成的 index.html 和其他 js 文件做任何事情。最好的事情是，将整个项目交给设计师并用ng serve教他/她如何运行它

【讨论】：

如果我想将它部署到域以便他可以查看它，我可以使用由 ng build --prod 制作的 dist 文件夹并使用 FileZilla 对其进行 ftp 使其生效，然后发送给他域？

是的。 ng build --prod 生成一些静态文件，你可以部署在任何支持部署静态文件的web服务器上。