无法在 Vue 组件中加载 WASM答案

【问题标题】：Can't load WASM in a Vue component无法在 Vue 组件中加载 WASM
【发布时间】：2020-06-23 22:23:10
【问题描述】：

在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

【问题讨论】：

标签： vue.js webpack error-handling emscripten webassembly

【解决方案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
  }
};

【讨论】：