標題重寫為：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：正確，
    導入異步：true
  }
}</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,
      },
    },
  },
};