Webpack 开发服务器为 wasm 提供错误的 MIME 类型

问题描述

我使用的是 Vue 2（但我认为我的问题不是特定于 Vue 的）。该应用程序使用我使用 npm install [directory_name] 安装的 WebAssembly 库。当我运行 npm run serve 时，它将 .wasm 文件作为 text/html 而不是 application/wasm。

我将此添加到 vue.config.js：

module.exports = {
  // ...
  devServer: {
    mimeTypes: { 'application/wasm': ['wasm'] },},};

但在那种情况下，我明白了：

错误：尝试将“wasm”扩展的映射从“application/wasm”更改为“application/wasm”。传递 force=true 以允许这样做，否则从“application/wasm”的扩展列表中删除“wasm”。

是否可能 cli-vue-service/webpack-dev-server 已经知道 .wasm 文件，而我对我们如何使用 npm install 安装库的理解有误？

解决方法

我正在回答我自己的问题。

由于 webpack 的工作方式，让 webpack 加载 .wasm 文件很棘手（假设有可能）。我所做的是将 -s "SINGLE_FILE=1" 添加到 emcc 的选项中，这样它就不会产生 .wasm 文件；相反，它将 wasm 嵌入到胶水 .js 文件中。

,

顺便说一句，我是在收到此错误后才来到这里的：

Uncaught (in promise) TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.

我的 wasm fetch URL 中有一个错字，我正在获取一个不存在的文件，但它给了我这个 mime 类型错误。一旦我修正了错字，一切都奏效了。我不必将 mime 类型添加到 webpack 配置中。 （也许他们在你二月份发布后修复了它。）我正在使用 Vue 开发服务器。