<p>Ich versuche, ein WebAssembly-Modul (in <code>Rust</code> geschrieben und mit <code>wasm-pack</code> kompiliert) in mein Vue-Projekt zu importieren. Ich habe ein Projekt erstellt: </p> <pre class="brush:php;toolbar:false;">vue-cli create my-vue-webasm-proj</pre> <p>Ich habe mich für Vue 2 entschieden.之后我像这样修改了我的<code>main.js</code>（添加了<code>async beforeCreate()</code>）：</p> <pre class="brush:php;toolbar:false;">/* main.js */ Vue aus 'vue' importieren App aus „./App.vue“ importieren Vue.config.produktionTip = false neues Vue({ rendern: h => h(App), async beforeCreate() { const wlib= waiting import('my-webasm-lib') console.log(wlib) }, }).$mount('#app')</pre> <p>在 <code>npm runserve</code> 之后我收到此错误:</p> <pre class="brush:php;toolbar:false;">Modulparse fehlgeschlagen: Unerwartetes Zeichen '' (1:0) Das Modul scheint ein WebAssembly-Modul zu sein, aber das Modul ist nicht als WebAssembly-Modul für Webpack gekennzeichnet. BREAKING ÄNDERUNG: Seit Webpack 5 ist WebAssembly nicht standardmäßig aktiviert und als experimentelle Funktion gekennzeichnet. Sie müssen eines der WebAssembly-Experimente über „experiments.asyncWebAssembly: true“ (basierend auf asynchronen Modulen) oder „experiments.syncWebAssembly: true“ (wie Webpack 4, veraltet) aktivieren. Stellen Sie bei Dateien, die nach WebAssembly transpiliert werden, sicher, dass Sie den Modultyp im Abschnitt „module.rules“ der Konfiguration festlegen (z. B. „type: „webassembly/async““). (Der Quellcode wurde für diese Binärdatei weggelassen)</pre> <p><strong>如何修复它？</strong></p> <p>我尝试将此配置添加到 <code>webpack.config.js</code> 中,正如所说的那样, 但没有成功:</p> <pre class="brush:php;toolbar:false;">module.exports = { Experimente: { asyncWebAssembly: true, importAsync: true } }</pre> <p>我的 <code>package.json</code> 如果如下:</p> <pre class="brush:php;toolbar:false;">... "Abhängigkeiten": { „core-js“: „^3.8.3“, „my-webasm-lib“: „Datei:../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,
      },
    },
  },
};