Rust Yew+Wasm应用Nginx部署异常：MIME类型错误求助

DevOps 小满

2026-7-15

解决Yew + Trunk部署Nginx时静态资源加载失败问题

问题根源

网页空白、Wasm未加载的核心原因是Nginx未为CSS、JS、Wasm文件返回正确的MIME类型，导致浏览器因类型不匹配拒绝加载资源。

补充Nginx的MIME类型配置
打开站点的server配置块或Nginx主配置文件（如/etc/nginx/nginx.conf），添加以下MIME类型映射：
```
types {
    text/css css;
    application/javascript js;
    application/wasm wasm;
}
```
若你使用默认的mime.types文件，需确认该文件包含上述类型，且http块中存在include /etc/nginx/mime.types;配置（默认配置通常包含前两类，但可能缺失application/wasm）。
验证并重载Nginx配置
先测试配置语法正确性：
```
nginx -t
```
确认无错误后，重载配置使修改生效：
```
systemctl reload nginx
```
确认资源MIME类型是否正确
使用curl命令检查资源响应头：
```
curl -I https://portal.xxxxxx.org/index.css
curl -I https://portal.xxxxxx.org/xxxxxxx793a6701a28a04.js
curl -I https://portal.xxxxxx.org/xxxxxxx793a6701a28a04_bg.wasm
```
正常情况下，应分别返回Content-Type: text/css、application/javascript、application/wasm。
检查Trunk生成的资源路径
查看dist目录下的index.html，确认CSS、JS、Wasm的引用路径为相对路径（Trunk默认生成），同时验证Nginx的root配置（/home/portal/xxxx-portal/dist;）确实指向正确的资源目录，可直接访问资源URL确认是否能正常下载。