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分开，不利于维护。

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

分享这篇文章

赞助鼓励：如果觉得内容对您有所帮助，您可以支付宝(左)或微信(右)：