Vue项目使用WebAssembly之后，Nginx如何解决WebAssembly不支持的问题

景凌凯

已于 2023-12-14 15:11:30 修改

阅读量1.4k

点赞数 11

CC 4.0 BY-SA版权

文章标签： vue.js wasm nginx

于 2023-12-14 15:09:15 首次发布

本文链接：https://blog.csdn.net/qq_41217010/article/details/134995890

文章讲述了在Vue项目中遇到WebAssemblyMIME类型错误时，如何通过Nginx单独配置和宝塔控制面板调整MIME类型来解决问题。详细介绍了修改Nginx配置文件和在宝塔中添加或修改MIME类型的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在VUE项目中使用WebAssembly之后，打包的项目会出现下面的错误

Uncaught (in promise) TypeError: WebAssembly: Response has unsupported 
MIME type 'application/wasm; charset=utf-8' expected 'application/wasm'

可以用以下办法解决

一：单独Nginx配置解决

1、打开 Nginx 的配置文件，可以在 /etc/nginx/nginx.conf 中找到。

2、在 http 部分中添加以下配置块：

http {
    ...
    
    types {
        application/wasm                wasm;
    }
}

这将告诉 Nginx 将 .wasm 文件的 MIME 类型设置为 application/wasm。

3、在你的网站配置文件中，添加以下 location 配置块，用于处理 .wasm 文件的请求：

server {
    ...
    
    location /path/to/your/wasm/files {
        types { }
        default_type application/wasm;
    }
}

将 /path/to/your/wasm/files 替换为实际的路径，该路径是你存放 .wasm 文件的目录。

4、保存并关闭配置文件。

5、重新加载或重启 Nginx 服务，以使新的配置生效。

完成这些步骤后，Nginx 将能够正确处理 .wasm 文件的请求，并返回正确的 MIME 类型。

二：宝塔配置解决

在使用宝塔控制面板部署 Vue 项目时，你可以尝试以下步骤来解决 `Uncaught (in promise) TypeError: WebAssembly: Response has unsupported MIME type 'application/wasm; charset=utf-8' expected 'application/wasm'` 错误：

1. 打开宝塔控制面板，进入你的网站设置页面。

2. 在网站设置页面的 `附加配置` 选项卡中，找到 `MIME 类型` 部分。

3. 在 `扩展名` 输入框中，添加 `.wasm` 扩展名。

4. 在 `MIME 类型` 输入框中，输入 `application/wasm`。

5. 点击 `添加` 按钮将该 MIME 类型添加到配置中。

6. 保存配置，并重启你的网站。

这样做会将 `.wasm` 文件的 MIME 类型设置为 `application/wasm`，而不是 `application/wasm; charset=utf-8`，以解决错误。

请注意，宝塔控制面板的界面可能因版本而异，但你应该能够找到类似的设置选项。

三：宝塔国际版解决方案

对于使用宝塔控制面板的国际版6.8.2部署Vue项目时出现的 `Uncaught (in promise) TypeError: WebAssembly: Response has unsupported MIME type 'application/wasm; charset=utf-8' expected 'application/wasm'` 错误，你可以尝试以下解决方案：

1. 登录到宝塔控制面板，并进入你的网站设置页面。

2. 找到 `Nginx` 配置选项，一般位于 `站点` 或 `网站` 部分。

3. 点击 `设置` 或类似按钮，进入 Nginx 配置页面。

4. 在 Nginx 配置页面的 `Location` 部分中，找到以 `.wasm` 结尾的配置项。

5. 将该配置项的 `charset` 参数值设置为空，即删除 `charset=utf-8`。

6. 保存配置，并重启你的网站。

这样做将会更新 Nginx 的配置，不再为 `.wasm` 文件添加 `charset=utf-8`，从而解决错误。

请注意，宝塔控制面板的不同版本可能有所差异，因此具体的界面和选项名称可能会有所不同。