Vite构建项目Nginx部署时JS模块MIME类型异常问题

问题核心 #

部署后浏览器将type="module"的JS文件识别为text/plain，触发MIME类型校验错误，导致模块加载失败——尽管网络请求能获取到正确的JS内容，但Sources标签中无法显示该文件。

根本原因 #

Alpine版本的Nginx默认配置未加载标准的MIME类型定义文件，导致.js文件没有被赋予正确的application/javascript MIME类型，浏览器因此无法识别为JS模块。

解决方案 #

修改Nginx配置，确保加载默认的MIME类型规则：

修改后的nginx.conf #

worker_processes 1;

events {
    worker_connections 1024;
}

http {
    # 加载Nginx默认的MIME类型定义
    include /etc/nginx/mime.types;
    # 兜底的默认MIME类型（可选）
    default_type application/octet-stream;

    server {
        listen 8000;
        server_name localhost;

        location / {
            root   /usr/share/nginx/html;
            index  index.html;
            try_files $uri $uri/ /index.html;
        }
    }
}

验证步骤 #

1. 重新构建Docker镜像并启动容器
2. 打开浏览器开发者工具，查看JS文件的响应头：Content-Type应为application/javascript
3. 确认控制台的MIME类型错误消失，Sources标签中能正常显示JS文件

内容的提问来源于stack exchange，提问作者Joakim Engqvist