本帖子用到的模组
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
作用
可以做出更好看的gui界面来实现玩家的操作交互，而不用受限于Java写gui来折磨自己
通过gui和KubeJS的双向通信可以实现更多的操作和功能
问答
问：我该如何让mc打开vue项目中的页面
答：将vue项目打包(npm run build)出压缩文件后调用打包文件(dist)中的index.html文件。
问：我该如何用mp调用打包后的html里的路由页面
答：在router配置中设置hashHistory，使用项目文件名/dist/index.html#/路由名来打开对应的路由页面
[image: 1753107069789-a75529e7-2dd1-4dc1-ac6e-1fcf1a79fd71-image.png]
问：我浏览器预览的页面和mc里预览的gui效果并不一致，而且放大放小窗口字的大小也会变化的很大
答：不要使用px作为元素的宽高，字的大小，使用vh，vw这种百分比参数来适配，在mc设置中的尺寸大小使用自动而不是固定一个大小
问：我该如何让页面和kjs进行交互
答：浏览器中使用文档1中对于mp:gui中浏览器部分调用指令的功能，指令使用我之前教程中eval指令来调用kjs方法即可。kjs可以通过mp自带的指令和api去调用网页中写好的方法并传递方法里的参数
问：我打包后的方法名被混淆了，kjs调用不到咋办
答：在vue文件中将不想混淆的文件塞到window中即可。你可以在那个方法里添加一个id，让kjs中传递这个id去网页中实现不一样的效果，目的是为了大量减少塞到window里的屎
[image: 1753107661018-30473f23-be3e-41cc-8f08-026d2e5f1605-image.png]
参考文献
文档1：https://doc.mafuyu.moe MapperPlugin教程
