如何在Vite和Vue 3中使用Webassembly / wasm模块？

问题描述

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

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

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

它引发以下错误：

未捕获到的SyntaxError：所请求的模块'/@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模块的正确方法是什么？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）