ionic-framework - 如何将 Ionic 4 应用程序部署到 Github 页面？

Question

我在将 Ionic 4 应用程序部署到 Github 页面时遇到问题。
我尝试遵循上传 Angular 应用程序的教程，但它不起作用。它不断抛出各种错误。
有人可以帮忙吗？
非常感谢。

Answer 1

以下是如何在 Ionic 4 中使用 angular-cli-ghpages:

创建您的 Ionic 项目 ( ionic start MyApp blank )

安装插件:npm i angular-cli-ghpages --save

将您的项目与您的 github 存储库连接起来。

在终端中导航到您的项目目录并执行 ionic build --prod -- --base-href https://YOUR_GITHUB_USERNAME.github.io/YOUR_PROJECT_NAME/ ，什么会创建 www文件夹，相当于 dist Angular 的文件夹。它还将您的 github 页面域设置为 index.html 中的 base href。

然后运行插件:npx angular-cli-ghpages --dir=www .末尾的标志指向 www文件夹，其中 index.html文件所在的位置将显示在 https://YOUR_GITHUB_USERNAME.github.io/YOUR_PROJECT_NAME/ .该插件将在您的项目中创建一个名为“gh-pages”的分支，其中包含位于 www 文件夹中的所有文件。

作为最后一步，您必须在项目设置 ( https://YOUR_GITHUB_USERNAME.github.io/YOUR_PROJECT_NAME/settings ) 中选择“gh-page”分支作为 github 页面的源。

如果您不想使用默认的“gh-pages”名称(也可以使用 master，但是您应该将源文件保留在不同的分支中)，您也可以设置不同的分支名称。只需像这样运行插件: npx angular-cli-ghpages --branch=BRANCH-NAME --dir=www .

赞 Gary Großgarten建议，您可以为它创建一个脚本，使其更容易。对于 Ionic，它将是: ionic build --prod -- --base-href https://YOUR_GITHUB_USERNAME.github.io/YOUR_PROJECT_NAME/ && npx angular-cli-ghpages --branch=BRANCH-NAME --dir=www
我自己正在寻找合适的解决方案，学分转到 Juangui Jordán's博客。