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

2023-12-14 15:50:10

在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`,从而解决错误。

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

文章来源:https://blog.csdn.net/qq_41217010/article/details/134995890
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。