标题重写为：The module appears to be a WebAssembly module, but it is not flagged as such for webpack.

Question

<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。之后我像这样修改了我的main.js（添加了async beforeCreate()）：

/* main.js */

从“vue”导入 Vue
从“./App.vue”导入应用程序

Vue.config.生产提示 = false

新的Vue({
  渲染：h => h（应用程序），
  异步 beforeCreate() {
    const wlib=等待导入('my-webasm-lib')
    控制台.log(wlib)
  },
}).$mount('#app')

; <p>在 <code>npm runserve模块解析失败：意外字符 '' (1:0) 该模块似乎是一个 WebAssembly 模块，但该模块未标记为 webpack 的 WebAssembly 模块。 重大更改：由于 webpack 5 WebAssembly 默认情况下未启用并被标记为实验性功能。 您需要通过“experiments.asyncWebAssembly: true”（基于异步模块）或“experiments.syncWebAssembly: true”（如 webpack 4，已弃用）启用 WebAssembly 实验之一。 对于转换为 WebAssembly 的文件，请确保在配置的“module.rules”部分设置模块类型（例如“type:”webassemble/async”）。 （此二进制文件省略源代码） <p><strong>如何修复？</strong></p> <p>我尝试将上述配置添加到 <code>webpack.config.js</code> 中，正如所说的那样，但没有成功：</p>

module.exports = {
  实验：{
    asyncWebAssembly：正确，
    导入异步：真
  }
}</pre>
<p>我的<code>package.json</code> 如果如下：</p>
...
“依赖项”：{
  "core-js": "^3.8.3",
  "my-webasm-lib": "文件：../my-webasm-lib/my-webasm-lib-pkg",
  “vue”：“^2.6.14”
},
“开发依赖项”：{
  "@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-模板编译器”：“^2.6.14”
},
...</pre>
<p><br />></p>

Answer 1

回答有点晚了，但也许对某人有帮助。

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