代码之家 › 专栏 › 技术社区 › Petya Naumova

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

ionic-cli ionic4 ionic-framework

0

Petya Naumova · 技术社区 · 7 年前

我试着按照一个上传应用程序的教程,但它不工作。它不断抛出各种各样的错误。谢谢。

2 回复 | 直到 7 年前

1

7

pfleigi 7 年前

以下是如何使用离子4:

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
然后运行插件: npx angular-cli-ghpages --dir=www . 最后的旗子指向 万维网 index.html https://YOUR_GITHUB_USERNAME.github.io/YOUR_PROJECT_NAME/ . 该插件将在您的项目中创建一个名为“gh pages”的分支,其中包含位于您的www文件夹中的所有文件。
最后一步,您必须在项目的设置中选择“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 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 博客。

2

4

Gary Großgarten 7 年前

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

npm run gh-pages

3

1

Mario 7 年前

只是一个提示:为了 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