我在将Ionic 4应用程序部署到Github页面时遇到了问题。 我尝试按照上传Angular应用程序的教程进行操作,但无法成功。它一直在抛出各种错误。 有没有人能够帮忙? 非常感谢。
我在将Ionic 4应用程序部署到Github页面时遇到了问题。 我尝试按照上传Angular应用程序的教程进行操作,但无法成功。它一直在抛出各种错误。 有没有人能够帮忙? 非常感谢。
以下是如何在Ionic 4中使用angular-cli-ghpages:
ionic start MyApp blank
)npm i angular-cli-ghpages --save
ionic build --prod -- --base-href https://YOUR_GITHUB_USERNAME.github.io/YOUR_PROJECT_NAME/
命令,这将创建一个 www
文件夹,与Angular中的 dist
文件夹类似。它还会在index.html中将你的github页面域名设置为基础href。npx angular-cli-ghpages --dir=www
。结束标志指向www
文件夹,其中包含将显示在 https://YOUR_GITHUB_USERNAME.github.io/YOUR_PROJECT_NAME/上的index.html
文件。该插件将在你的项目中创建一个名为“gh-pages”的分支,其中包含位于www
文件夹中的所有文件。如果您不想使用默认名称“gh-pages”(也可以是主分支,但此时您应将源文件保存在不同的分支中),您还可以设置不同的分支名称。只需像这样运行插件: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的博客。
只需添加
"scripts": {
...
"gh-pages": "ng build --base-href 'https://USERNAME.github.io/REPOSITORY_NAME/' --prod && npx ngh --dir=www/"
...
}
添加到您的 package.json 文件中。
如果您想要一个自定义域名,可以添加 cname 标志
--cname=example.com
npm run gh-pages
注意:对于一个 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