タイトルは次のように書き換えられます: このモジュールは WebAssembly モジュールのように見えますが、Webpack に対してそのようにフラグが設定されていません。

Question

WebAssembly モジュール (Rust で書かれ、wasm-pack を使用してコンパイルされた) を Vue プロジェクトにインポートしようとしています。私がやったのはプロジェクトを作成することでした:

vue-cli create my-vue-webasm-proj

私は Vue 2 を選択しました。その後、私はこのように修正しました私のmain.js（Create()の前にasyncを追加）：

/* main.js */

「vue」から Vue をインポートします
「./App.vue」からアプリをインポート

Vue.config.productionTip = false

新しい Vue({
  レンダリング: h => h(アプリ)、
  async beforeCreate() {
    const wlib= await import('my-webasm-lib')
    コンソール.ログ(wlib)
  }、
}).$mount('#app')

在npm runserve之後我收到此错误：

モジュール解析に失敗しました: 予期しない文字 '' (1:0)
このモジュールは WebAssembly モジュールであるように見えますが、モジュールには Webpack の WebAssembly モジュールとしてフラグが設定されていません。
重大な変更: webpack 5 以降、WebAssembly はデフォルトでは有効になっておらず、実験的機能としてフラグが立てられています。
「experiments.asyncWebAssembly: true」（非同期モジュールに基づく）または「experiments.syncWebAssembly: true」（非推奨の webpack 4 など）を介して WebAssembly 実験の 1 つを有効にする必要があります。
WebAssembly にトランスパイルするファイルの場合は、構成の「module.rules」セクションでモジュール タイプを設定してください (例: 「type: "webassembly/async"」)。
(このバイナリ ファイルのソース コードは省略されています)

どのように修正しますか?

我尝试この構成を webpack.config.js に追加します。中、正如の如く、しかし成功しませんでした：

module.exports = {
  実験: {
    asyncWebAssembly: true、
    importAsync: true
  }
}

私たちの package.json如果如下：

...
"依存関係": {
  "core-js": "^3.8.3",
  "my-webasm-lib": "ファイル:../my-webasm-lib/my-webasm-lib-pkg",
  "vue": "^2.6.14"
}、
"devDependency": {
  "@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"
}、
...

Answer 1

答えるのが少し遅れましたが、誰かの助けになるかもしれません。

リーリー