Angular6打包的那些事

发布时间:2019-06-10 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了Angular6打包的那些事脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

Angular在升级到6的时候,多了许多新的功能,比如ng命令,在从5升级到6的时候是无痛升级的,但是升级到了6之后,也有许多地方做了改变,比如Angular的设置,Angular的base-path等,通过在一台机器上部署多个Angular的单页应用,来说明这些问题。

angular 打包,缩小包体积命令
ng build --PRod --aot
来源
网站打不开了,但是找到一个不错的博客
angular 6新的设置方式,我想在Angular新建项目的时候使用yarn而不是npm

You should update the article.
WITh @angular/cli version 6+ it will be
SET GLOBAL: ng config —g cli.packageManager npm
SET LOCAL: ng config cli.packageManager npm
GET: ng config cli.packageManager
The diff is:

  1. No more get/set commends, only config and get/set is inferred.

needs to prefix cli proPErties with cli. because there are other things now, From devkit…

  1. base-path设置

这个设置(见词知意)可以让项目添加一个新的URL前缀,比如默认是/,你可以设置成/blog
Angular.json文件中找到projects->todo-web(项目名字)->Architect->build->options下新增:

"basehref": "/todo/",
"deployUrl": "/todo/"

Angular6打包的那些事

  1. 项目打包上传到服务器

我的项目在服务器上的位置: /todo/todo

Angular6打包的那些事


我还有另一个angular的项目位置在: /bLOG/blog, 他们的项目结构是相同的。
在看看nginx的配置(server下):

Angular6打包的那些事


其中try_files可以止Angular刷新404的问题。

这样我的可以用一个Nginx做代理,同时访问我的两个web项目,两个api项目。
他们的地址是:

  1. [TODO项目]https://kazma233.me/life/
  2. [博客项目, 写着玩的,前端比较差]https://kazma233.me/blog/

以上可以说是解决了很大部分的坑了。

脚本宝典总结

以上是脚本宝典为你收集整理的Angular6打包的那些事全部内容,希望文章能够帮你解决Angular6打包的那些事所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。