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

Question

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

Answer 1

我正在使用 https://github.com/angular-schule/angular-cli-ghpages 轻松实现此目的。

只需添加

 "scripts": {
    ...
    "gh-pages": "ng build --base-href 'https://USERNAME.github.io/REPOSITORY_NAME/' --prod && npx ngh --dir=www/"
...
  }

给你的 package.json.

如果您想要一个通用域，您可以添加 cname 标志

--cname=example.com

到 ngh 命令。

构建并上传您的网站运行

npm run gh-pages

Answer 2

以下是如何将 angular-cli-ghpages 与 Ionic 4 结合使用：

创建您的 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 文件夹，该文件夹相当于 Angular 的 dist 文件夹。它还将您的 github 页面域设置为 index.html.
然后运行插件：npx angular-cli-ghpages --dir=www。末尾的标志指向www文件夹，index.html文件所在的文件夹将显示在https://YOUR_GITHUB_USERNAME.github.io/YOUR_PROJECT_NAME/。该插件将在您的项目中创建一个名为 "gh-pages" 的分支，其中包含位于您的 www 文件夹中的所有文件。
作为最后一步，您必须 select 项目设置中的 "gh-page" 分支 (https://YOUR_GITHUB_USERNAME.github.io/YOUR_PROJECT_NAME/settings) 作为来源用于您的 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 博客。

Answer 3

请注意：对于 gitlab 存储库（不是 Github），您可以这样做：

.gitlab-ci.yml:

pages:
 image: node:latest
 stage: deploy
 script:
  - npm install -g ionic cordova
  - npm install
  # frontend application is served at https://what-digital.gitlab.io/stemba/
  # we need to set the basePath to the sub dir
  - ionic build --prod -- --base-href="https://what-digital.gitlab.io/gitlab-pages/"
  - rm -rf public
  - mkdir public
  - cp -r www/* public
 artifacts:
  expire_in: 1 week
  paths:
  - public
 only:
  - dev

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

How to deploy Ionic 4 app to Github pages?

ionic-framework

ionic4

ionic-cli