manbetx手机登录

摆设Angular运用到Github pages

你将看到:快捷摆设angular运用到github pages,利用github供应的pages资源快捷创建演示站点。解决稀有的404问题。

开篇

众所周知,github为开发者供应了免费的静态网站托管办事,咱们能够用github pages快捷摆设咱们的名目test或名目文档。

最近开发angular运用(),总体架构已做好,在排除aot进程中的种种问题以后
,想着先把test摆设到github pages以供大家。

github pages

运用subtree

先来介绍一个通用的方式。在开发的进程中,我运用了git subtree来快捷公布Live test到gh-pages分支。主要运用了以下三条饬令:

git add -f dist
git commit -am 'Update live test'
git subtree push --prefix dist origin gh-pages

能够看出,该方式运用起来也是相当便当的。用Git Subtree来保护
咱们的子名目代码(/dist),对咱们全部
名目来说是通明的,咱们看到的等于一个一般的目次,本来怎样做现在照旧怎样做,只需在需要更新live test时去做同步代码的驾御。如果你对此方式感兴趣可自行搜索git subtree来理解更多,在这里就一笔带过了。

当公布angular运用到github pages时,我并不推荐你如许做。因为,咱们有更好的方式来摆设咱们的angular运用到github pages。

运用angular-cli-ghpages

是angular社区贡献的npm包,供应了一种近乎于傻瓜式的解决方案,即即是你不太理解git。

要留意的是angular-cli-ghpages只支持angular2+的名目。Show time :)

  • 首先,咱们先来全局安装angular-cli-ghpages
$ npm install -g angular-cli-ghpages
  • 接下来,咱们运用angular-cli的产物模式来打包咱们的运用,并且附加--base-href参数修改<base href>,以便咱们的运用能正确拜候咱们的静态资源。运转以下饬令:
$ ng build --prod --base-href "https://<user-name>.github.io/<repo>/"
  • 最初,运用angular-cli-ghpages来快捷摆设咱们的运用到github pages。咱们运用他的简写饬令方式:
$ ngh

运转饬令以后
,不出不测的话,控制台将打印Successfully published!。此时angular-cli-ghpages已主动帮咱们摆设了咱们的angular运用。你能够拜候https://username.github.io/app-name/来检察详细的摆设情形。

设置参数

angular-cli-ghpages供应了良多有用的参数,各个参数的详细用法,请检察angular-cli-ghpages的。在这里,咱们来说几个经常运用的:

  • 运用--message来添加commit信息:
$ ngh --message="First deploy"
  • 摆设到指定的特定分支:
$ ngh --branch=production
  • 另外,你能够运用--dry-run来检察该饬令运转时输入的信息:
$ ngh --dry-run

稀有问题

对单页面运用来说咱们应当把所有流量指向咱们的index.html,来防止异常行为的产生

在摆设进程中你可能会遇到404错误,或,当咱们刷新某个页面时,咱们的页面不测的变成了404。

咱们需要修复它。对github pages来说,咱们没方法直接设置Github pages,但能够在commit时添加一个404页。简略的解决方案以下:

咱们在名目的根目次新建404.html,把index.html中的内容完全复制到404.html中就能够了。如许做github pages仍然会在恰当的时候给出一个404响应,浏览器将会正确处理该页,并正常加载咱们的运用。关于Github pages hack,推荐一篇文章:

(完结)

原创文章转载请注明.
作者:
原文地址:

版权申明:自由转载-非商用-非衍生-保持签名()

订正&讨论:

更多精彩,尽在https://she31network.com

You may also like...