如何将 Web assembly/wasm 模块与 Vite 和 Vue 3 一起使用?

2024-01-16

我正在尝试将 wasm 模块导入 vite vue 3 项目。https://github.com/rsms/markdown-wasm https://github.com/rsms/markdown-wasm


<script>
import init, { parse } from "markdown-wasm";

export default {
  async setup() {
    console.log(parse("# hello\n*world*"));
  },
};
</script>


它抛出以下错误:

未捕获的语法错误:请求的模块“/@modules/markdown-wasm/dist/markdown.es.js”不提供名为“default”的导出

我知道 wasm 需要异步加载。

在 vite 文档上,它说它需要按照与此类似的方式导入。

import init from './example.wasm'

init().then(exports => {
  exports.test()
})

通过解构导入


import { parse, ready } from "markdown-wasm";

export default {
  async setup() {
    await ready;
  },
};

给出以下错误。

md.js:85 GET http://localhost:3000/markdown.wasm 404 (Not Found)
(anonymous) @ md.js:85
(anonymous) @ md.js:85
(anonymous) @ md.js:85
md.js:85 wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': HTTP status code is not ok
(anonymous) @ md.js:85
Promise.then (async)
(anonymous) @ md.js:85
Promise.then (async)
(anonymous) @ md.js:85
(anonymous) @ md.js:85
(anonymous) @ md.js:85
md.js:85 falling back to ArrayBuffer instantiation
(anonymous) @ md.js:85
Promise.then (async)
(anonymous) @ md.js:85
Promise.then (async)
(anonymous) @ md.js:85
(anonymous) @ md.js:85
(anonymous) @ md.js:85
md.js:85 GET http://localhost:3000/markdown.wasm 404 (Not Found)
r @ md.js:85
(anonymous) @ md.js:85
Promise.then (async)
(anonymous) @ md.js:85
Promise.then (async)
(anonymous) @ md.js:85
(anonymous) @ md.js:85
(anonymous) @ md.js:85
md.js:85 failed to asynchronously prepare wasm: Error: wasm abort: both async and sync fetching of the wasm failed
(anonymous) @ md.js:85
Promise.then (async)
r @ md.js:85
(anonymous) @ md.js:85
Promise.then (async)
(anonymous) @ md.js:85
Promise.then (async)
(anonymous) @ md.js:85
(anonymous) @ md.js:85
(anonymous) @ md.js:85
wlib.js:21 Uncaught (in promise) Error: wasm abort: Error: wasm abort: both async and sync fetching of the wasm failed
    at X (wlib.js:21)
    at Q (md.js:85)
    at md.js:85
    at X (wlib.js:21)
    at md.js:85

导入 wasm 模块的正确方法是什么?


None

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何将 Web assembly/wasm 模块与 Vite 和 Vue 3 一起使用? 的相关文章

随机推荐