Vite构建React+TS应用部署K8s(Nginx)遇MIME类型错误求助

我通过Vite创建了React+TypeScript应用，按教程完成初始项目搭建。另一个Angular应用采用相同的Nginx部署流程到Kubernetes时运行正常，但该Vite应用部署后出现以下错误，导致资源无法加载：

plint2dev.linguaserve.net/:16 Refused to apply style from 'https://plint2dev.linguaserve.net/assets/index.2518dafb.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
index.f2ba2231.js:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

我已经尝试过相关的StackOverflow解决方案，但均无效。当前使用的Nginx配置和Dockerfile如下：

Nginx配置 #

pid /run/nginx.pid;
worker_processes auto;
worker_rlimit_nofile 65535;

events {
        multi_accept on;
        worker_connections 65535;
}

http {
        client_max_body_size 100M;
        charset utf-8;
        sendfile on;
        tcp_nopush on;
        tcp_nodelay on;
        server_tokens off;

        # MIME
        include mime.types;
        default_type application/octet-stream;

        # logging
        access_log /var/log/nginx/access.log;
        error_log /var/log/nginx/error.log warn;

        # load configs
        include /etc/nginx/conf.d/*.conf;

        # linguaserve.net
        server {
                  listen 80;
                  listen [::]:80;
                  server_name .linguaserve.net;

                  set $base /usr/share/nginx/html;

                  # security headers
                  add_header X-Frame-Options "SAMEORIGIN" always;
                  add_header X-XSS-Protection "1; mode=block" always;
                  add_header X-Content-Type-Options "nosniff" always;
                  add_header Referrer-Policy "no-referrer-when-downgrade" always;
                  add_header X-Request-ID  $request_id;

                  location / {
                    try_files $uri $uri/ /index.html;
                  }

                  # . files
                  location ~ /\.(?!well-known) {
                    deny all;
                  }

                  # logging
                  access_log /var/log/nginx/access.log;
                  error_log /var/log/nginx/error.log warn;

                  # favicon.ico
                  location = /favicon.ico {
                    log_not_found off;
                    access_log off;
                  }


                  # gzip
                  gzip on;
                  gzip_vary on;
                  gzip_proxied any;
                  gzip_comp_level 6;
                  gzip_types text/plain text/css text/xml application/json application/javascript application/rss+xml application/atom+xml image/svg+xml;
        }
}

Dockerfile配置 #

FROM nginx

## Remove default Nginx website
RUN rm -rf /usr/share/nginx/html/*

## Copy our default nginx config
COPY nginx/default.conf /etc/nginx/nginx.conf

COPY /dist/* /usr/share/nginx/html/

RUN  cd /usr/share/nginx
RUN  ln -s /usr/share/nginx/html /usr/share/nginx/www
RUN  ln -s /usr/share/nginx/html /etc/nginx/html
EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

排查方向及解决方案 #

1. 修正Docker资源复制命令 #

当前COPY /dist/* /usr/share/nginx/html/只会复制dist目录下的顶层文件，不会包含子目录（比如assets）。修改为：

COPY /dist/ /usr/share/nginx/html/

确保dist下所有文件和子目录都被完整复制到Nginx静态目录。

2. 添加静态资源专属Nginx规则 #

当前location /的try_files会把所有找不到的资源重定向到index.html，导致静态资源404时返回HTML文件（MIME类型为text/html）。添加针对assets目录的规则：

location /assets/ {
    root /usr/share/nginx/html;
    try_files $uri =404;
}

让Nginx优先匹配并返回静态资源，找不到时直接返回404而非index.html。

3. 验证Vite编译配置 #

检查vite.config.ts中的base配置，确保编译后的资源路径正确。如果应用直接部署在域名根路径下，保持默认base: '/'即可；若部署在子路径下需对应调整。

4. 检查容器内MIME类型配置 #

进入Nginx容器，确认/etc/nginx/mime.types文件存在且包含正确的类型映射：

text/css css;
application/javascript js;

若文件缺失或内容错误，可手动添加或替换正确的mime.types文件。

5. 验证容器内静态文件状态 #

进入容器检查静态资源是否存在且权限正确：

docker exec -it <容器ID> ls -l /usr/share/nginx/html/assets

确保css、js文件存在，且Nginx进程拥有读取权限。

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