[1.21.1 KubeJS7]mcef与KubeJS交互（踩坑经验）

[zhenshiz]

本帖子用到的模组

kubejs-neoforge-2101.7.1-build.181

rhino-2101.2.7-build.74

mapperplugin-1.5.0 后文中称其为mp

mcef-neoforge-2.1.6-1.21.1

本帖子用到的前端技术栈

Vue3+Vite+VueRouter

作用

1. 可以做出更好看的gui界面来实现玩家的操作交互，而不用受限于Java写gui来折磨自己
2. 通过gui和KubeJS的双向通信可以实现更多的操作和功能

问答

问：我该如何让mc打开vue项目中的页面
答：将vue项目打包(npm run build)出压缩文件后调用打包文件(dist)中的index.html文件。
问：我该如何用mp调用打包后的html里的路由页面
答：在router配置中设置hashHistory，使用项目文件名/dist/index.html#/路由名来打开对应的路由页面

问：我浏览器预览的页面和mc里预览的gui效果并不一致，而且放大放小窗口字的大小也会变化的很大
答：不要使用px作为元素的宽高，字的大小，使用vh，vw这种百分比参数来适配，在mc设置中的尺寸大小使用自动而不是固定一个大小
问：我该如何让页面和kjs进行交互
答：浏览器中使用文档1中对于mp:gui中浏览器部分调用指令的功能，指令使用我之前教程中eval指令来调用kjs方法即可。kjs可以通过mp自带的指令和api去调用网页中写好的方法并传递方法里的参数
问：我打包后的方法名被混淆了，kjs调用不到咋办
答：在vue文件中将不想混淆的文件塞到window中即可。你可以在那个方法里添加一个id，让kjs中传递这个id去网页中实现不一样的效果，目的是为了大量减少塞到window里的屎

参考文献

文档1：https://doc.mafuyu.moe MapperPlugin教程