vue中使用wasm

刚学前端的东西弄了很久才放进去，记录一下，刚开始使用插件直接加载wasm发现多个参数没办法传，还是使用原始产生的js文件来加载。

怎么编译c/c++代码可见 wasm总结

把wasm放到vue里，要修改：

• 在vue.config.js中添加配置

const CopyWebpackPlugin = require('copy-webpack-plugin');
plugins: [
      new CopyWebpackPlugin([
            {
              from: "./src/wasm/out/sig_handler.wasm",
              to  : "./static/js/sig_handler.wasm"
            },
        ])
    ]

意思大概是把wasm文件放到打包后的static/js/位置，这样编译wasm过程中生成的胶水js文件就能访问到wasm文件了

• 然后在生成的胶水js文件末尾加上

export default Module;

• 这样就能在main.js中导入了

const OriginalVueWasm = import('@/wasm/out/sig_handler')

导入之后使用

async function waitwasm() {
  const wasmmodule = await OriginalVueWasm;
  wasmmodule.default.onRuntimeInitialized = () => {
    Vue.prototype.$wasm = wasmmodule.default;
    //new Vue ...
  }
}


(async () => {
  waitwasm()
})()

这样在vue里就能通过this.$wasm来访问了