reactjs Docker react应用程序、webpack编译,但编辑和保存后浏览器未刷新

ryoqjall  于 2023-01-25  发布在  React
关注(0)|答案(1)|浏览(153)

我正在做一个包含react作为前端技术的项目。Python Django用于后端,它们都由一个docker-compose文件和Dockerfiles停靠。当我尝试编辑和保存index.html或App.js文件时,什么也没发生。尽管应用程序的文件在docker-compose文件中正确安装,但Docker容器终端和浏览器仍然保持静止。
当我在SO和其他网站上查找这种情况的解决方案时,所有的建议都是针对环境变量,如CHOKIDAR_USEPOLLING,WATCPACK_POLLING和FAST_REFRESH。
在那些网站中,由于在我的项目中使用React脚本版本5.0.1,建议使用WATCHPACK_POLLING代替CHOKIDAR_USEPOLLING。所以我在环境变量中设置WATCHPACK_POLLING = true并重试。
这次webpack在终端中编译此消息:

frontend-app-1       | Compiling...
frontend-app-1       | Compiled successfully!
frontend-app-1       | webpack compiled successfully

但是编译成功后什么都没有发生,浏览器仍然不刷新。我试过设置FAST_REFRESH = false来启用热重载,但是什么都没有改变。
我混淆了新旧解决方案,同时使用了CHOKIDAR_USEPOLLING和WATCHPACK_POLLING。这次编辑和保存后,编译再次完成,浏览器刷新,但有一个小问题。浏览器刷新过程无法赶上编译,这两个过程是不同步的。
因此,当我将网站标题从"React应用程序"更改为"React"并保存时,编译开始,浏览器刷新。浏览器仍然显示"React应用程序"标题。之后,当我再次编辑索引文件将标题从"React"更改为"测试"时,刷新的浏览器显示标题"React"。刷新是这样落后至少一步。
本质上,我的问题是在编辑和保存在一个dockerized react应用程序,webpack编译成功,但浏览器不刷新。
我怎样才能解决这个问题?
编辑:我已经尝试了FAST_REFRESH与这两个变量,没有任何变化。

wkyowqbh

wkyowqbh1#

1.您是否正在主机上编辑源代码?如果是,您是否将源代码文件夹或文件绑定到容器?
1.请尝试不同的node版本。我最近遇到了同样的问题,用不同的node版本拍摄图像后得到了解决。
1.如果前面的选项不起作用,那么你可以在主机和容器之间设置目录同步。有关详细信息,请参阅how to rsync from a host computer to docker container using docker cp

相关问题