Angular CLI: 发布到 GitHub Pages

时间 2019-11-13

标签 angular cli 发布 github pages 栏目 AngularJS 繁體版

原文原文链接

发布 Angular 应用的简单方式是使用 GitHub Pages.javascript

点击这里能够查看发布以后的应用。css

首先须要建立一个 GitHub 帐号，随后，为您的项目建立一个仓库。记下 GitHub 中的用户名和项目名称。html

例如，个人 GitHub 帐号是 haoguanjun，我建立的项目名称是 ng-hello。java

而后，您要作的就是运行 git

ng build --prod --output-path docs --base-href ng-hello

这个 PROJECT_NAME 就是您的项目在 GitHub 中的名称。这个示例中使用的项目名称是 ng-hello，将 docs/index.html 复制为 docs/404.html。github

提交修改并 Push 到仓库中。app

您应该在项目的主页 https://github.com/haoguanjun/ng-hello 上，看到一个 docs 的文件夹，其中包含了一个 404.html 页面。ui

页面内容以下所示：spa

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello</title>
    <base href="ng-hello">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link href="styles.d41d8cd98f00b204e980.bundle.css" rel="stylesheet"/>
  </head>
  <body>
    <app-root></app-root>
    <script type="text/javascript" src="inline.97a5517db35cb02cdd8d.bundle.js"></script>
    <script type="text/javascript" src="polyfills.f20484b2fa4642e0dca8.bundle.js"></script>
    <script type="text/javascript" src="main.352a0febf476a50f1de9.bundle.js"></script>
  </body>
</html>

在 GitHub 项目的页面上，配置为 publish from the docs folder.code

点击项目中的，进入项目配置页面。找到 GitHub Pages 配置部分。

在 Source 下面的下拉列表中，找到 master branch/docs folder ，选中并保存。以下所示。

这就是全部您须要作的！如今能够访问地址 https://USER_NAME.github.io/PROJECT_NAME 来访问页面了。

这个示例的寄宿在 GitHub 的 https://haoguanjun.github.io/ng-hello/ 中，能够直接点击查看。

这个示例全部的代码都保存在 https://github.com/haoguanjun/ng-hello 中，您能够直接下载查看。

您还能够使用 angular-cli-ghpages，这是一个全功能的包，能够帮助您作全部这些工做，且还有额外的功能。