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

Question

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

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

Answer 1

最有可能的是<base href="">设置。假设我们有一个名为“foo”的 angular-cli 创建的项目。当我们运行时ng build --prod，默认情况下，Angular 将输出dist/foo没有任何终端错误。几件事：

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

2. 我们<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/

Answer 2

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

Answer 3

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

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