如何将Ionic 4应用程序部署到Github页面? [英] How to deploy Ionic 4 app to Github pages?

问题描述

将Ionic 4应用程序部署到Github页面时遇到问题. 我尝试跟随有关上载Angular应用程序的教程，但是它不起作用.它不断抛出各种错误. 有人可以帮忙吗? 非常感谢.

I have a problem deploying Ionic 4 app to Github pages. I tried follwing a tutorial for uploading Angular app but it does not work. It keeps throwing errors of all kinds. Does anyone can help? Thanks a lot.

推荐答案

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

Here is how to use angular-cli-ghpages with Ionic 4:

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/，这将创建www文件夹，该文件夹与Angular的dist文件夹相当.还将您的github页面域设置为index.html中的基本href.
5. 然后运行插件:npx angular-cli-ghpages --dir=www.末尾的标志指向www文件夹，该文件位于index.html文件所在的位置，该文​​件将显示在
6. 最后一步，您必须在项目的设置中选择"gh-page"分支(

1. Create your Ionic project (ionic start MyApp blank)
2. Install the plugin: npm i angular-cli-ghpages --save
3. Connect your project with your github repository.
4. Navigate in the terminal to your project directory and execute ionic build --prod -- --base-href https://YOUR_GITHUB_USERNAME.github.io/YOUR_PROJECT_NAME/, what will create the www folder, which is comparable to the dist folder for Angular. It also sets your github page domain as base href in index.html.
5. Then run the plugin: npx angular-cli-ghpages --dir=www. The flag at the end points to the www folder, where the index.html file is located that will be displayed at https://YOUR_GITHUB_USERNAME.github.io/YOUR_PROJECT_NAME/. The plugin will create a branch called "gh-pages" in your project that contains all files which are located in your www folder.
6. As a last step you have to select the "gh-page" branch in the settings of your project (https://YOUR_GITHUB_USERNAME.github.io/YOUR_PROJECT_NAME/settings) as a source for your github page.

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

You can also set different branch names if you don't want to use the default "gh-pages" name (also master is possible, but then you should keep the source files in a different branch). Just run the plugin like this: npx angular-cli-ghpages --branch=BRANCH-NAME --dir=www.

建议 GaryGroß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

Like Gary Großgarten suggested, you can create a script for it which makes it easier. For Ionic it would be: ionic build --prod -- --base-href https://YOUR_GITHUB_USERNAME.github.io/YOUR_PROJECT_NAME/ && npx angular-cli-ghpages --branch=BRANCH-NAME --dir=www

我本人也在寻找合适的解决方案，请访问 JuanguiJordán的博客.

I was looking for a proper solution myself, credits go to Juangui Jordán's blog.

这篇关于如何将Ionic 4应用程序部署到Github页面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！