最近在使用 Angular 进行项目开发的时候，发现需要将项目发布到 GitHub Pages 上进行展示。这时候，我们就需要使用到一个很好用的 npm 包，即 angular-cli-ghpages，该包可以让我们轻松地将 Angular 项目部署到 GitHub Pages 上。接下来，本文将详细地介绍该包的使用方法及相关细节。
安装与配置
安装
首先，我们需要先安装 angular-cli 和 angular-cli-ghpages，可以使用以下命令进行安装：
npm install -g @angular/cli npm install -g angular-cli-ghpages
配置
在安装完上述两个包之后，我们需要将项目设置为可部署到 GitHub Pages 上，具体步骤如下：
- 在
angular.json文件中增加以下代码：
-- -------------------- ---- -------
-
---------- -----------------------------------------------------
----------- -
--------------- -
------------ -
-------- -
---------- -
------------- -------
----------- ----------------
-
--
--------- -
---------- ----------------------
---------- -
------- ------------------------------------------
-
-
-
-
-
-其中，project-name和username需要根据自己的项目名称和用户名进行修改。outputPath表示要生成的静态文件所在的目录，一般我们使用docs；baseHref表示在 GitHub Pages 上的访问路径，一般为/project-name/。
此外，还需要在项目根目录下创建一个.nojekyll文件，该文件的作用是防止 Jekyll 处理文件。
- 在 GitHub 上创建一个仓库，并将其与本地项目关联。
部署项目
生成静态文件
在完成上述步骤后，我们就可以使用以下命令生成静态文件了：
ng build --prod --base-href "https://username.github.io/project-name/"
其中，--base-href表示生成的静态文件在 GitHub Pages 上的路径，也需要按照实际情况进行修改。
部署
在生成静态文件之后，我们需要将其部署到 GitHub Pages 上，可以使用以下命令进行部署：
ngh --dir=docs
其中，--dir表示要部署的文件夹，默认为dist，需要根据实际情况进行修改。
踩坑记录
在实际的使用过程中，我也遇到了一些问题，下面是我总结的解决方案：
404 页面找不到
如果在访问 GitHub Pages 上的应用时显示 404 页面找不到，我们可以检查以下几个地方：
- 是否正确设置了
angular.json文件中的baseHref属性。 - 是否正确设置了 GitHub Pages 上的项目路径。
- 是否在 GitHub Pages 上手动创建了对应的路径。
部署失败
如果在部署时一直失败，我们可以检查以下几个地方：
- 项目中是否有文件或文件夹命名不规范，如文件名中包含空格等。
- 在部署之前是否完成了 git 配置和关联。
- 是否使用了全局代理，修改代理设置后重试。
总结
本文详细地介绍了如何使用 angular-cli-ghpages 包将 Angular 项目部署到 GitHub Pages 上，并总结了在使用过程中可能遇到的问题及解决方案。希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/57677