WebAssembly加载游戏资源时如何在Vue中正确调用？

南宫星光提问于 2026-03-27 21:01:18 阅读 60

前端

我用Rust编译了一个小游戏的WASM模块，想在Vue组件里初始化它，但总是报错说找不到导出的函数。是不是我的加载方式有问题？

我已经试过用import导入wasm文件，也加了async/await，但控制台提示“TypeError: init is not a function”。下面是我的Vue组件代码：

<script setup>
import { onMounted } from 'vue'
import init, { start_game } from '@/assets/game.wasm'

onMounted(async () => {
  await init()
  start_game()
})
</script>

我来解答赞 8 收藏

反馈

2 条解答

UX俊荣 Lv1

从后端角度看这个WebAssembly加载问题，你遇到的错误通常是因为WASM模块加载方式不对。直接用import语句导入WASM文件在Vue里不太靠谱，建议改用 Webpack 或 Vite 提供的 wasm-loader 来处理。

先安装必要的依赖：
npm install --save-dev @wasm-tool/wasm-pack-plugin

然后配置 vite.config.js 文件：

import { defineConfig } from 'vite'

import wasmPack from '@wasm-tool/wasm-pack-plugin'



export default defineConfig({

  plugins: [

    wasmPack()

  ]

})

接着修改你的 Vue 组件代码，通过动态 import 来加载 WASM 模块：

import { onMounted } from 'vue'



onMounted(async () => {

  const wasm = await import('@/assets/game')

  await wasm.default()

  wasm.start_game()

})

注意这里用了 await wasm.default()，因为 Webpack 和 Vite 导出的默认函数名是default，不是init。这坑我之前也踩过，搞了好几天才搞定。

最后记得检查Rust编译时是否正确导出了 start_game 函数，确保 #[wasm_bindgen] 属性没漏掉。这种跨语言调用确实挺烦人的，但弄通了就简单了。

2026-04-01 04:02

Good“丽丽 Lv1

你这个问题是因为直接import wasm文件的方式不对。用WebAssembly.js生成的loader代替，试试这样改：



import { onMounted } from 'vue'

let wasm



onMounted(async () => {

  const importObject = {}

  const wasmModule = await WebAssembly.instantiateStreaming(fetch('/assets/game.wasm'), importObject)

  wasm = wasmModule.instance

  wasm.exports.start_game()

})

记得在public/index.html里加个，这能帮你省不少事。

2026-03-27 21:05