独家*记录一次ionic在线编译的坑

初衷

做ionic时非常大的问题, 那就是准备将app发布到app store时, app store/google play store对app的审查非常严格,像我这样设计根本不注意的开发,只有被劝退的份。 那么如果要测试的时候,如果能够把app编译到web上,测试起来既方便, 最早的版本还可以在线传播出去,一举两得~

缺陷

这样的做法并非是完美的替代方案。因为在线编译的app, 没有办法调用Cordova,所以一切原生接口都会失效。我这次在线编译的目的是测试,因此没有关系。

方案1(失败)

国内的论坛基本上没有在线编译ionic的例子, 毕竟本身就是小众的框架。
那么我想到的第一个方案是用heroku打包编译, 因为heroku支持angular

首先要安装heroku toolbelt命令行工具(Heroku CLI),安装完成后在cmd测试heroku, 出现:

usage:heroku COMMAND

成功。

然后,我们把app传到git上

git init

git add .

git commit -am "Initial commit"

然后连接heroku:

heroku login
heroku create
heroku git:remote -a guarded-basin-65910
git push heroku master

然后打开发现报错:

ng not found

ng 应该是包含在ionic和angular的开发环境里的, 这里报错说明heroku并没有帮我们准备好angular/ionic的环境

这里搜索到的大多数方法,都是说,要在build前,安装好一些特定的包,比如typescript 和 ionic/app-script,
但是尝试了之后,本地运行也会报错, 尝试解决很长时间以后,放弃方案。希望解决了问题的小伙伴可以联系我,+weixin: xxxx123147

方案2(成功)

方案2是把app上传到github的pages上面
首先上传好app,在settings中启用github page
到这里,github page就会准备好链接, 可以把app publish上去

这里需要踩几个坑
首先检测一下是否已经连接到项目:(以下名字都会用app代替)

git remote -v

然后这里注意, 先设置好credential ,否则会无法识别用户

git config --global credential.helper wincred

然后安装angular-cli-ghpages

npm i --save angular-cli-pages

到angular.json里确认defaultproject name是不是和github一致:

“defaultProject”:“app”

然后确认,src/index.html中 base href是不是指向 /app/


然后编译到git page

npm run ng build --prod --output-path app --base-href "https://.github.io/app/"

然后最后用angular graph发布app,这里需要注意,angular graph dir默认地址是angular的dist
ionic需要改成www

npx ngh --dir=www

编译成功, 发布成功

后记

注意的点是, 测试过程中, 后端要部署到https的服务器上, 否则会被GitHub page 拦截
我的微信:xxxx123147, 欢迎小伙伴们来一起交流

你可能感兴趣的:(独家*记录一次ionic在线编译的坑)