create react app创建的项目改为使用rsbuild

Tue, Dec 31, 2024

发现样式丢失（当然这个也算是一直没想到，所以耽搁了很多时间）

实际上问题发生的原因很简单，就是公司里边是使用docker部署的项目，但是原先webpack打包的项目css文件的content-type是正常的text/css，然而改成使用rsbuild之后却变成了text/plain，这样就导致了浏览器解析样式失败了，刚开始一直以为是rsbuild是不是打包有问题，甚至考虑是不是因为线上是在linux环境中打包的问题，所以耽搁了很多时间，主要很误导人的点是webpack的没问题，rsbuild打包的有问题，所以就从来没考虑到这个点，出问题其实是nginx配置的问题，原因在下边注释里边

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

events {
    worker_connections 1024;
}

http {
    log_format main '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
    access_log /var/log/nginx/access.log main;

    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;
    keepalive_timeout 65;
    types_hash_max_size 2048;

    #----- 原因主要是这里，公司同事估计是为了简洁，把nginx配置写成了这样，导致nginx丢失了很多配置，nginx会根据mime.types里边对应的后缀来生成content-type，挺难受的
    #include /etc/nginx/mime.types;
    #default_type application/octet-stream;

    include /etc/nginx/conf.d/*.conf;

    server {
        listen 80;
        server_name example.com;

        location / {
            root /usr/share/nginx/html;
            index index.html index.htm;
        }

        error_page 404 /404.html;
        location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
        }
    }
}