vue.js - 无法在Vue组件中加载WASM

Question

在main.cpp中:

#include <emscripten.h>

EMSCRIPTEN_KEEPALIVE
extern "C" {
    const char *testFunc(const char *parameter) {
        return parameter;
    }
}

编译命令:

em++ .\main.cpp -s EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]' -o wasm_module.js;

在Vue组件中:

import wasmModule from "./wasm/wasm_module.js"; // I put both WASM and JS wrapper in the same folder

export default {
  created() {
    console.log(wasmModule);
  }
};

在 vue.config.js中，我添加了:

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.wasm$/,
          loaders: ["wasm-loader"]
        }
      ]
    }
  }
};

但是，我得到了:

Uncaught (in promise) RuntimeError: abort(CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0) at Error

更新
我使用的是稍微不同的编译命令，该命令由官方 WebAssembly Discord server的成员提供:

em++ .\main.cpp -s EXPORTED_RUNTIME_METHODS'["call", "cwrap"]' -s MODULARIZE -s ENVIRONMENT="web" -s EXPORTED_FUNCTIONS='["_testFunc"]' -o wasm_module.js

然后，我在 wasm_module.js中进行了挖掘，发现了一个变量 scriptDirectory，该变量负责查找 wasm_module.wasm文件
将其记录到控制台后，输出:

http://localhost:8080/js/

因此，我将 .wasm文件移到 public/js，并且顺便说一句，删除了 configureWebpack条目，因为它现在已无用了
现在，我可以:

import wasmModule from "./wasm/wasm_module.js";
export default {
  async created() {
    const instance = await wasmModule();
    const func = instance._testFunc();
  }
};

但是，仍然存在一个问题:
不管我传递给 _testFunc的参数如何，我每次都会获取输出 0

Answer 1

原来解决方案非常简单main.cpp

#include <emscripten.h>
#include <string>

EMSCRIPTEN_KEEPALIVE
extern "C" {
  std::string* testFunc(std::string* parameter) {
    return parameter;
  }
}

汇编:

em++ .\main.cpp -s EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]' -s MODULARIZE -s EXPORTED_FUNCTIONS='["_testFunc"]' -o wasm_module.js

wasm_module.js应该在 src/下 wasm_module.wasm应该在 public/js/下
然后，Vue组件:

import moduleWasm from "./path/to/wasm_module.js";

export default {
  async created() {
    const instance = await moduleWasm();
    const func = instance.cwrap("testFunc", "string", ["string"]); // Note that: (func_name, return_type, [parameter_types])
    console.log(func("Hello World") === "Hello World"); // true
  }
};