Vue 打包项目在 WebView2 中无法接收 C# 数据：如何解决？

vue 打包项目在 webview2 中无法接收 C# 数据

在将 Vue 打包项目集成到 WebView2 Windows 应用程序中时，可能会遇到无法通过 JavaScript 接收来自 C# 代码发送的数据的问题。

要诊断和解决此问题，请考虑以下步骤：

1. 检查 URL 路径：确保在 WebView2 中加载的 Vue 项目 index.html 文件的 URL 路径正确无误。
2. 添加 postMessage 消息：在 Vue 项目的 index.html 文件中，添加一行 window.chrome.webview.postMessage(“successload”); 代码。这会向 C# 代码发送一条消息，表明 Vue 项目已加载。
3. 注册事件侦听器：确保在 Vue 项目的 index.html 文件中已注册 window.chrome.webview.addEventListener(“message”, function (event) {…}) 事件侦听器，以接收来自 C# 代码的消息。
4. 检查 C# 代码：验证 C# 代码是否在正确的时间发送来自设备列表的数据，且发送到的 URL 是否与 Vue 项目的 index.html 文件相匹配。

通过实施这些步骤，可以有效排查和解决 Vue 打包项目在 WebView2 中无法接收 C# 发送的数据的问题。

立即学习“前端免费学习笔记（深入）”；