本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《如何使用 Go 编写的 wasm 函数与 Vue + Vite 进行设置》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

目标

如何在 Vue + Vite 中使用 Go 编写的 wasm 函数？ （最好在 pinia 的动作商店中）

如何不成功

在 Go 方面，使用 vanilla js 遵循 wiki，它工作得很好，我可以使用 syscall/js 包（所以我猜我的 .wasm 并不完全是垃圾）

在Vitesse（Vue + Vite）方面遵循Vite文档 我可以运行 wasm 函数 add.wasm （取自此处）

但不幸的是，使用我用 go v1.19 自己编写和编译的 .wasm 时，出现以下错误：

Uncaught（承诺中）TypeError：WebAssembly.instantiate（）：导入#0 module =“go”错误：模块不是对象或函数

如果我尝试直接在商店中导入 wasm_exec.js 并得到：

无法解析来自 wasm_exec.js 的导入“go” 或者 请求的模块“/src/store/wasm_exec.js”未提供名为“Go”的导出

我尝试使用 vite-plugin-wasm 但没有成功。

该问题可能与以下事实有关：用 go 编写的 wasm 需要使用 wasm_exec.js 然后使用 Go() 实例才能使 WebAssembly.instantiateStreaming() 工作..

或者这完全是我不明白的事情。

通过我的演示会更容易理解

我不知道如何让它发挥作用..问题出在 go 中吗？维特？瓦斯姆？ 它可以与这个问题或这个问题相关吗？ 如果有人有使用 is Cominaison 的经验（转到 wasm vue vite ），您可以分享您的经验/代码/文档吗？

正确答案

已解决

经过进一步研究，我发现了我的错误......

正如错误消息所示，问题是由于 wasm_exec.js 的集成造成的。

我最终使用tinygo来减少生成的.wasm的大小： 对于一个简单的 hello world，标准 go1.19 的 ~1MB 与tinygo 的 ~10KB…（顺便说一句，我很想知道这种巨大差异背后的原因......因为垃圾收集器？？？）

但是正如他们在 doc 中提到的，tinyo wasm_exec.js 与标准 go one 不同：

内容的执行需要一些从 WebAssembly 调用的 JS 辅助函数。我们已在 tinygo/targets/wasm_exec.js 中定义了这些。它基于标准库中的 $GOROOT/misc/wasm/wasm_exec.js，但略有不同。确保您使用的 wasm_exec.js 版本与用于编译的 tinygo 版本相同。

我错误地将 go 中的 wasm_exec.js 与 .wasm 形式的tinygo 混合在一起…或者反之亦然 idk…但它不起作用..

为了修补它，我使用了tinygo中的2个文件（不仅仅尝试了go1.19），并将它们导入到index.html的标题中

Vite 处理休息，我可以从任何地方调用 wasm 函数，包括 pinia 商店。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《如何使用 Go 编写的 wasm 函数与 Vue + Vite 进行设置》文章吧，也可关注golang学习网公众号了解相关技术文章。