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

Question

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

Answer 1

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

1. 创建您的 Ionic 项目 ( ionic start MyApp blank)
2. 安装插件：npm i angular-cli-ghpages --save
3. 将您的项目与您的 github 存储库连接起来。
4. 在终端中导航到您的项目目录并执行ionic build --prod -- --base-href https://YOUR_GITHUB_USERNAME.github.io/YOUR_PROJECT_NAME/，将创建文件夹，该文件夹与 Angular的文件夹www相当。dist它还将您的 github 页面域设置为 index.html 中的基本 href。
5. 然后运行插件：npx angular-cli-ghpages --dir=www. 末尾的标志指向www文件所在的文件夹，该文件夹index.html将显示在https://YOUR_GITHUB_USERNAME.github.io/YOUR_PROJECT_NAME/。该插件将在您的项目中创建一个名为“gh-pages”的分支，其中包含位于 www 文件夹中的所有文件。
6. 作为最后一步，您必须在项目设置 ( 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 的博客。

Answer 2

我正在使用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。

如果你想要一个 costum 域，你可以添加 cname 标志

--cname=example.com

到 ngh 命令。

构建和上传您的网站运行

npm run gh-pages

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