无法在 Vue 中加载 Emscripten 编译的C++

Question

需要明确的是，我不是C++专家

我有这个C++代码：

#include <emscripten.h>
#include <string>
EMSCRIPTEN_KEEPALIVE
std::string test(std::string parameter) {
return parameter;
}
int main(int argc, char** argv) {
return 0;
}

我使用以下方法编译它：

cmake.exe --build cmake-build-emscripten --target data_converter -s EXPORTED_RUNTIME_METHODS=[cwrap] -s EXPORTED_FUNCTIONS=[_test] -s EXPORT_ES6=1 -s MODULARIZE=1 -s USE_ES6_IMPORT_META=1

请注意，我的 IDE 是 CLion，其中我的 CMake 配置是：环境：

CC=C:repositoriesc++data-converteremsdkupstreamemscriptenemcc.bat;CXX=C:repositoriesc++data-converteremsdkupstreamemscriptenem++.bat;AR=C:repositoriesc++data-converteremsdkupstreamemscriptenemar.bat;LD=C:repositoriesc++data-converteremsdkupstreamemscriptenemcc.bat;NM=C:repositoriesc++data-converteremsdkupstreambinllvm-nm.exe;LDSHARED=C:repositoriesc++data-converteremsdkupstreamemscriptenemcc.bat;RANLIN=C:repositoriesc++data-converteremsdkupstreamemscriptenemranlib.bat;EMMAKEN_COMPILER=C:repositoriesc++data-converteremsdkupstreambinclang++.exe;EMSCRIPTEN_TOOLS=C:repositoriesc++data-converteremsdkupstreamemscriptentools;HOST_CC=C:repositoriesc++data-converteremsdkupstreambinclang.exe;HOST_CXX=C:repositoriesc++data-converteremsdkupstreambinclang++.exe;HOST_CFLAGS=-W;HOST_CXXFLAGS=-W;EMSCRIPTEN=C:repositoriesc++data-converteremsdkupstreamemscripten

构建选项：

-s EXPORTED_RUNTIME_METHODS=["cwrap"] -s EXPORTED_FUNCTIONS=["_test"] -s EXPORT_ES6=1 -s MODULARIZE=1 -s USE_ES6_IMPORT_META=1

项目结构：

<Vue root>
└ src
└ data
└ wasm
└ data_converter.js
└ data_converter.wasm

然后，我将data_converter.js和data_converter.wasm移到<Vue root>srcdatawasm

我的 Vue 代码有：

<script>
import Module from "./data/wasm/data_converter";
export default {
created() {
const test = Module().cwrap("test", "string", ["string"]);
console.log(test("Hello world"));
}
};
</script>

当我尝试加载组件时：

Uncaught (in promise) RuntimeError: abort(CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0). Build with -s ASSERTIONS=1 for more info.
at abort (webpack-internal:///./src/data/wasm/data_converter.js:875:9)
at eval (webpack-internal:///./src/data/wasm/data_converter.js:959:7)
[Vue warn]: Error in created hook (Promise/async): "TypeError: _data_wasm_data_converter__WEBPACK_IMPORTED_MODULE_48___default(...) is not a function"
found in
---> <App> at src/App.vue
<Root>

---

失败的尝试 #2

由于我使用的是 Webpack，我安装了 wasm-loader，我的vue.config.js大致如下所示：

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

然后，在组件中：

import Module from "./data/wasm/data_converter";
export default {
// ...
async created() {
const instance = await Module();
const test = instance.exports._test;
console.log(test("Hello world"));
}
};

错误与上述错误相同。

Answer 1

3c 21 44 4f是<!DO，或HTML文档的开头。您确定导入是在编译时解决的还是在运行时的提取有效？

请与网络检查器联系，以查看获取 WASM 模块的结果。