Vue2项目导入Rust编译的WebAssembly模块时webpack报错的解决方法

1. 改用vue.config.js配置Webpack #

vue-cli 5.x 项目不识别根目录的webpack.config.js，需创建或修改vue.config.js来覆盖Webpack配置：

module.exports = {
  configureWebpack: {
    experiments: {
      asyncWebAssembly: true
    },
    module: {
      rules: [
        {
          test: /\.wasm$/,
          type: 'webassembly/async'
        }
      ]
    }
  }
}

2. 确认Wasm包的编译目标 #

使用wasm-pack编译Rust代码时，指定适配打包工具的目标：

wasm-pack build --target bundler

默认的web目标可能和Webpack 5的异步Wasm支持不兼容，bundler目标会生成更适合打包工具的代码结构。

3. 保持正确的异步导入写法 #

在Vue组件中通过异步方式导入模块，确保等待加载完成：

async beforeCreate() {
  const myWasmLib = await import('my-webasm-lib');
  // 根据你的Wasm模块实际导出调用方法，示例：
  // myWasmLib.init();
}

4. 重启开发服务 #

修改配置后，必须停止当前的npm run serve进程，重新启动让配置生效。

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