标题重写为：Le module semble être un module WebAssembly, mais il n'est pas signalé comme tel pour webpack.

Question

J'essaie d'importer un module WebAssembly (écrit en Rust et compilé en utilisant wasm-pack) dans mon projet Vue. Ce que j'ai fait, c'est créer un projet :

vue-cli créer mon-vue-webasm-proj

J'ai choisi Vue 2.main.js（添加了async beforeCreate()）：

/* main.js */

importer Vue depuis 'vue'
importer l'application depuis './App.vue'

Vue.config.productionTip = faux

nouvelle Vue({
  rendu : h => h (application),
  async avantCreate() {
    const wlib= wait import('my-webasm-lib')
    console.log(wlib)
  },
}).$mount('#app')

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

Échec de l'analyse du module : caractère inattendu '' (1:0)
Le module semble être un module WebAssembly, mais le module n'est pas marqué comme module WebAssembly pour webpack.
CHANGEMENT RUPTURE : depuis webpack 5, WebAssembly n'est pas activé par défaut et signalé comme fonctionnalité expérimentale.
Vous devez activer l'une des expériences WebAssembly via 'experiments.asyncWebAssembly: true' (basé sur des modules asynchrones) ou 'experiments.syncWebAssembly: true' (comme webpack 4, obsolète).
Pour les fichiers qui sont transpilés vers WebAssembly, assurez-vous de définir le type de module dans la section « module.rules » de la configuration (par exemple « type : « webassembly/async » »).
(Code source omis pour ce fichier binaire)

如何修复它？

我尝试将此配置添加到 webpack.config.js 中，正如所说的那样，但没有成功：

module.exports = {
  expériences: {
    asyncWebAssembly : vrai,
    importAsync : vrai
  }
}
我的 package.json 如果如下：
...
"dépendances": {
  "core-js": "^3.8.3",
  "my-webasm-lib": "fichier:../my-webasm-lib/my-webasm-lib-pkg",
  "vue": "^2.6.14"
},
"dépendances dev": {
  "@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

Un peu tard pour répondre, mais peut-être que cela aidera quelqu'un.

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