vue3 vite3 gzip 提示 Failed to load module script

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

这是 nginx 配置

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include mime.types;
    default_type application/octet-stream;
    server_names_hash_bucket_size 3526;
    server_names_hash_max_size 4096;
    log_format combined_realip '$remote_addr $http_x_forwarded_for [$time_local]'
    '$host "$request_uri" $status'
    '"$http_referer" "$http_user_agent"';
    sendfile on;
    tcp_nopush on;
    keepalive_timeout 300;
    client_header_timeout 3m;
    client_body_timeout 3m;
    send_timeout 3m;
    connection_pool_size 256;
    client_header_buffer_size 16k;
    large_client_header_buffers 8 4k;
    request_pool_size 4k;
    output_buffers 4 32k;
    postpone_output 1460;
    client_max_body_size 100m;
    client_body_buffer_size 256k;
    fastcgi_intercept_errors on;
    tcp_nodelay on;
    gzip on; 
    gzip_buffers 4 16k;
    gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;

    upstream serveraddress{
        server *****:8100;
    }

    server { 
        listen       8080;
        root   /usr/local/nginx/html/dist;
        index index.html;
        location / {       
                try_files $uri $uri/ @router;
             index index.html;
              proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }  

        location @router {
            rewrite ^.*$ /index.html last;
        }

        location ~^/apis/{
                rewrite ^/apis/(.*)$ /$1 break;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_pass http://serveraddress; 
        proxy_read_timeout 300s;
        proxy_send_timeout 300s;
        }  
    }
}

weixiangzhe

2023-01-03 14:24:59 +08:00

1. 就是网络加载失败了，加个路由加载失败处理就好
2. 对应的还有，你开启了全局的 http cache ，这样的话，每次发版后，旧用户访问加载失败的概率非常高，建议是 html 文件只开启协商缓存就好了, 我们的配置类似这样

```
# static resources
location ^~ /assets/ {
expires 1M;
access_log off;
add_header Cache-Control "public";
}

# html 文件
location / {
add_header Cache-Control "no-cache, max-age=0";
}
```