在参考网上众多资料后，终于将Vue与Unity Webgl双向通信的功能完成。在此过程中遇到了很多问题，故记录下整体流程。
方案实现：
1.unity端实现一个jslib文件预定义函数作为桥接。
2.c#使用DllImport引入和调用预定义的函数。
3.web端使用js定义被调用函数。
1.Unity Webgl程序嵌入vue
2.Unity -> vue通信
3.vue -> Unity通信
1.Unity Webgl程序嵌入vue
1）在Unity打包生成webgl项目后，将webgl文件夹内容复制到vue项目目录下的static文件夹中
添加Web.Config文件，内容如下：
<?xml version="1.0" encoding="utf-8"?>
<!--
有关如何配置 ASP.NET 应用程序的详细信息，请访问
https://go.microsoft.com/fwlink/?LinkId=169433
-->
<configuration>
<system.webServer>
<httpProtocol>
<!-- 允许跨域配置 -->
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="X-Requested-With,Content-Type,Authorization" />
<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE,OPTIONS" />
<add name="Access-Control-Allow-Credentials" value="true" />
</customHeaders>
</httpProtocol>
<staticContent>
<remove fileExtension=".mem" />
<remove fileExtension=".data" />
<remove fileExtension=".unity3d" />
<remove fileExtension=".jsbr" />
<remove fileExtension=".membr" />
<remove fileExtension=".databr" />
<remove fileExtension=".unity3dbr" />
<remove fileExtension=".jsgz" />
<remove fileExtension=".memgz" />
<remove fileExtension=".datagz" />
<remove fileExtension=".unity3dgz" />
<remove fileExtension=".json" />
<remove fileExtension=".unityweb" />
<mimeMap fileExtension=".mem" mimeType="application/octet-stream" />
<mimeMap fileExtension=".data" mimeType="application/octet-stream" />
<mimeMap fileExtension=".unity3d" mimeType="application/octet-stream" />
<mimeMap fileExtension=".jsbr" mimeType="application/octet-stream" />
<mimeMap fileExtension=".membr" mimeType="application/octet-stream" />
<mimeMap fileExtension=".databr" mimeType="application/octet-stream" />
<mimeMap fileExtension=".unity3dbr" mimeType="application/octet-stream" />
<mimeMap fileExtension=".jsgz" mimeType="application/x-javascript; charset=UTF-8" />
<mimeMap fileExtension=".memgz" mimeType="application/octet-stream" />
<mimeMap fileExtension=".datagz" mimeType="application/octet-stream" />
<mimeMap fileExtension=".unity3dgz" mimeType="application/octet-stream" />
<mimeMap fileExtension=".json" mimeType="application/json; charset=UTF-8" />
<mimeMap fileExtension=".unityweb" mimeType="application/octet-stream" />
</staticContent>
</system.webServer>
</configuration>2）在vue项目中以iframe的方式调用
<iframe src="/static/Unity/index.html"
ref="unityvue">
</iframe>2.Unity -> vue通信
1）在unity创建好项目后，在Assets目录下新建Plugins文件夹，创建一个jslib文件，可以用txt创建文件，文件名加后缀名为“xxx.jslib”，切记后缀名更改为jslib
jslib当作中间者，unity与它通信，前端也与它通信，在此基础上三者之间进行了通信对接
2）在刚刚创建的jslib文件里，添加以下代码：
mergeInto(LibraryManager.library,{
//Unity内自定义调用方法名 PostScore(string sceneName)
PostScore: function (sceneName) {
strs = Pointer_stringify(sceneName); //字符串需用Pointer_stringify转换
GetScore(strs); //前端自定义方法名GetScore(strs)
},
});3）在unity中，新建一个脚本，添加命名空间using System.Runtime.InteropServices; 并添加以下C#代码：
[DllImport("__Internal")]
private static extern void PostScore(string currentScene); //当前场景在unity中调用PostScore()方法，即调用jslib里的PostScore()方法
4）打包时在Player Settings->Player->Publishing Settings中将压缩格式禁用，平台选择Webgl
5）在unity打包程序后，在index.html中添加GetScore()方法
以上是unity基础的向前端通信方式。
此时我们在网页嵌入的Unity页面中点击交互按钮时即可触发PostScore(str)方法，将数据从Unity页面传输到前端html中。
3.vue -> Unity通信
前端页面向unity页面传值需用到unityInstance.SendMessage()函数，调用格式如下：
SendMessage(unityObject,unityMethodName,value)
unityObject——unity脚本挂载对象名
unityMethodName——unity脚本内调用方法名（需为public方法）
value——前端需要传出的值
1） 在Unity2022.3版本打包生成的webgl中不能直接找到unityInstance对象，需要在index.html页面作如下处理，自定义一个myGameInstance对象用于获取unityInstance
var myGameInstance = null;
createUnityInstance(document.querySelector("#unity-canvas"), {
...//省略代码
}).then((unityInstance) => {
myGameInstance = unityInstance;
});
2）之后就能愉快的在vue页面调用该方法了~
const refreshAllItem = ()=>{
console.log('当前unity对象', unityvue.value)
unityvue.value.contentWindow.myGameInstance.SendMessage('WeatherControl', 'TransToAfternoon', "")
}参考文档
在此感谢以下作者的参考资料~
网页传递参数到Unity WebGL ，WebGL传递参数到网页_webgl unityinstance_先生沉默先的博客-CSDN博客
WebGL给Unity传递参数问题1： Cannot read properties of undefined (reading ‘SendMessage‘)_先生沉默先的博客-CSDN博客