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
  }
};

无法在Vue组件中加载WASM

更新

1 个答案: