nacos前端打包遇到的问题
在对于nacos源码进行二次开发时,涉及到console-ui的改动,nacos可以将console-ui拆分进行前后端分离部署,亦可以集成到console中进行一体化部署。一体化部署时候,console-ui打包中可能会遇到以下问题。
即:console-ui npm run build以后,启动nacos,console中从console-ui中copy过来的js,css文件不生效,依旧是旧版本,或者直接回退了几个版本。
-
以下截图内容是集成到console模块中,最终生效的css样式以及js文件,实质上console-ui打包后,copy过来的也就是这两个文件,很多时候文件的创建时间,明明是最新的,也copy过来了,但就是不生效。
-
从截图中可以看到,console-ui在run build时,会执行copyFile.js,copyFile.js中会将console-ui中dist路径下打包的问题件,copy到Console模块的static路径下。
-
以上逻辑看上去没毛病,但是本地在打包的时候,copy到console中的文件就是不生效,甚至出现了版本回退的问题。
注:console-ui在打包后,copy到console中之后,最好是clean一下之后再构建,不然nacos启动后缓存问题也会导致集成到console中的文件不生效。
后来经过多次尝试摸索,发现清空掉console中static目录夹,留空文件夹,再run build console-ui,之后static中会有css / js两个文件夹产生(copy过来的),然后回填public,img,html等内容,回填完后,重新构建nacos工程,启动,最新样式即刻生效。 至于导致的原因,没有细究,这样能解决我遇到的问题。
console-ui启动后无法加载样式问题
console-ui启动后,访问8000进入登录界面,有时候会出现样式加载不了的情况,但是加载路径什么的都没有问题。如图。
解决办法:找到console-ui/public/index.html打开文件后,随便回车换行,然后保存,node会自动编译,编译完后刷新一下页面就可以了。
出现的原因可能缓存,或者编译的时候对html内容解析错误,重新解析一次正常。