deployUrl解决angular项目打包后静态资源的部署到其它目录的问题

2019-9-14 Jon angular

通常angular 打包后里面的css、js文件放到了别的服务器,或者放到了别的目录
1、当前服务器aaa.com index放到了aaa.com下面,css/js文件放到了bbb.com下面
2、当前服务器aaa.com index放到了aaa.com下面,css/js放到了aaa.com/public/下面

最简单的办法就是将打包好的index.html里面的资源前面设置为对应的绝对路径和相对路径即可。

那么当遇到项目中有懒加载和预加载摸模块文件时,这些文件不直接在index中引用,而是通过runtime.**.js中引用
这时问题就会出现,部署上后发现懒加载模块文件报404找不到
查看文件路径发现,懒加载模块的文件路径走的仍然是index.html的相对路径去查找
所以肯定就找不到了。

那么如何解决这个问题呢,我们去看打包好的runtime,可以在里面找到引入的懒加载模块文件,发现引入文件时使用的是./相对地址,那么修改成绝对地址或者改为我们要的相对地址比如./public/**.js,发现这样就可以正确访问了。
但是缺点非常明显,修改压缩后的文件非常不明智和不方便。

最佳解决方案
在cli中其实给出了给好的解决方案
只要在打包时指定资源文件路径就ok了,如
ng build --deployUrl=http://bbb.com/
ng build --deployUrl=/public/
这样打包后不仅index.html里的css和js都自动加上这个路径,而且runtime.js中的懒加载模块也会加上这个路径
这样就完美解决了路径问题。

其它问题
当然如果说你的js要放到/public/js/目录中,css要放到/public/css/目录中。
那么建议将deployUrl配置成/public/js/,避免懒加载报错,打包后在手动更改css的目录。
所以如果没有特殊要求,不建议将css、js分开,不利于维护。

最后如果能将打包后的文件都放到一个目录下,那么是最好了,就不用折腾了。

分享这篇文章
赞助鼓励:如果觉得内容对您有所帮助,您可以支付宝(左)或微信(右):

声明:如无特殊注明,所有博客文章版权皆属于作者,转载使用时请注明出处。谢谢!

发表评论:

皖ICP备15010162号-1 ©2015-2022 知向前端
qq:1614245331 邮箱:13515678147@163.com Powered by emlog sitemap