如何在Vue.js中加载Emscripten生成模块并调用函数（免手动修改）

一、无需手动修改生成文件的正确编译与导入方式 #

你遇到的import.meta.url语法错误，是因为Emscripten默认生成的ES模块代码使用了Vue项目Babel未处理的语法。通过调整编译参数就能避免这个问题，同时生成可直接导入的规范ES模块：

1. 正确的Emscripten编译命令 #

emcc add.c -o js_plumbing.js \
  -s EXPORTED_FUNCTIONS="['_Add']" \
  -s EXTRA_EXPORTED_RUNTIME_METHODS=['ccall','cwrap'] \
  -s EXPORT_ES6=1 \
  -s MODULARIZE=1 \
  -s USE_ES6_IMPORT_META=0

关键参数说明：

• USE_ES6_IMPORT_META=0：禁用生成import.meta.url代码，彻底避开Babel编译报错
• EXPORT_ES6=1：生成符合ES6模块规范的代码
• MODULARIZE=1：将模块封装为工厂函数，方便我们灵活初始化

2. Vue组件中的正确导入与使用 #

由于Wasm模块加载是异步操作，建议在组件初始化阶段完成模块加载，避免用户点击时模块还未就绪：

<template>
  <div>
    <button @click="callAdd">Add!</button>
    <p>Result: {{ result }}</p>
  </div>
</template>
<script>
import createModule from './js_plumbing'

export default {
  data() {
    return {
      result: null,
      wasmModule: null // 存储初始化后的模块实例
    }
  },
  async created() {
    // 异步初始化Wasm模块，确保组件渲染前完成加载
    this.wasmModule = await createModule()
  },
  methods: {
    callAdd() {
      if (!this.wasmModule) {
        alert('模块还在加载中，请稍后再试')
        return
      }
      // 两种调用方式任选其一
      // 方式1：直接调用导出的C函数（注意函数名前的下划线）
      const res = this.wasmModule._Add(1, 2)
      // 方式2：使用ccall封装调用
      // const res = this.wasmModule.ccall('Add', 'number', ['number', 'number'], [1, 2])
      this.result = res
    }
  }
}
</script>

二、解决你更新1中的结果无法传递问题 #

你在onRuntimeInitialized回调里的this指向出错了！默认情况下，回调函数里的this不是Vue组件实例，所以无法直接修改this.result。用箭头函数或者绑定this就能轻松解决：

修改后的组件代码 #

<template>
  <div>
    <button @click="callAdd">Add!</button>
    <p>Result: {{ result }}</p>
  </div>
</template>
<script>
import Module from './js_plumbing'

export default {
  data() {
    return {
      result: null,
      wasmInstance: null
    }
  },
  methods: {
    callAdd() {
      // 避免重复初始化模块
      if (this.wasmInstance) {
        this.result = this.wasmInstance._Add(1, 2)
        return
      }
      // 用箭头函数保留Vue组件的this指向
      this.wasmInstance = Module({
        onRuntimeInitialized: () => {
          const res = this.wasmInstance._Add(1, 2)
          this.result = res
        }
      })
    }
  }
}
</script>

也可以用bind(this)来绑定上下文：

onRuntimeInitialized: function() {
  const res = this.wasmInstance._Add(1, 2)
  this.result = res
}.bind(this)

补充小提示 #

• Emscripten导出的C函数名默认会加上下划线前缀（比如Add变成_Add），直接调用时要注意这个细节
• 如果使用ccall调用，函数名可以直接写Add（不需要下划线），因为ccall会自动处理前缀
• 生产环境建议把Wasm文件放在Vue的静态资源目录，确保打包工具能正确识别并处理

内容的提问来源于stack exchange，提问作者user2315094