<p>我正在尝试在我的 Vue 项目中导入 WebAssembly 模块（用 <code>Rust</code> 编写并使用 <code>wasm-pack</code> 编译）。我所做的是创建一个项目：</p> <pre class="brush:php;toolbar:false;">vue-cli create my-vue-webasm-proj</pre> <p>我选择了Vue 2。之后我像这样修改了我的<code>main.js</code>（添加了<code>async beforeCreate()</code>）：</p> <pre class="brush:php;toolbar:false;">/* main.js */ import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false new Vue({ render: h =&gt; h(App), async beforeCreate() { const wlib= await import('my-webasm-lib') console.log(wlib) }, }).$mount('#app')</pre> <p>在 <code>npm runserve</code> 之后我收到此错误：</p> <pre class="brush:php;toolbar:false;">Module parse failed: Unexpected character '' (1:0) The module seem to be a WebAssembly module, but module is not flagged as WebAssembly module for webpack. BREAKING CHANGE: Since webpack 5 WebAssembly is not enabled by default and flagged as experimental feature. You need to enable one of the WebAssembly experiments via 'experiments.asyncWebAssembly: true' (based on async modules) or 'experiments.syncWebAssembly: true' (like webpack 4, deprecated). For files that transpile to WebAssembly, make sure to set the module type in the 'module.rules' section of the config (e. g. 'type: "webassembly/async"'). (Source code omitted for this binary file)</pre> <p><strong>如何修复它？</strong></p> <p>我尝试将此配置添加到 <code>webpack.config.js</code> 中，正如所说的那样，但没有成功：</p> <pre class="brush:php;toolbar:false;">module.exports = { experiments: { asyncWebAssembly: true, importAsync: true } }</pre> <p>我的 <code>package.json</code> 如果如下：</p> <pre class="brush:php;toolbar:false;">... "dependencies": { "core-js": "^3.8.3", "my-webasm-lib": "file:../my-webasm-lib/my-webasm-lib-pkg", "vue": "^2.6.14" }, "devDependencies": { "@babel/core": "^7.12.16", "@babel/eslint-parser": "^7.12.16", "@vue/cli-plugin-babel": "~5.0.0", "@vue/cli-plugin-eslint": "~5.0.0", "@vue/cli-service": "~5.0.0", "eslint": "^7.32.0", "eslint-plugin-vue": "^8.0.3", "vue-template-compiler": "^2.6.14" }, ...</pre> <p><br /></p>

module.exports = {
  runtimeCompiler: true,
  configureWebpack: {
    externals: {
      experiments: {
        asyncWebAssembly: true,
      },
    },
  },
};