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文件夹，该文件夹与Angular的dist文件夹相当。还将您的github页面域设置为index.html中的基本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博客。

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

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

3 个答案: