Vue3 项目打包style样式丢失

Question

Vue3项目打包 style样式丢失

部署后的页面丢失vue文件下的style样式。原本dev状态下的header样式如下：

但是打包部署后的样式丢失了：

查看网络请求均正常（200）

Answer 1

问题已解决，主要是nginx的配置问题。获取的CSS文件虽然成功获取，但是并没有使得其中的样式生效，是加载的MIME类型不对。（浏览器不认为这个是一个CSS文件）。

include mime.types;：这行指令表示包含一个名为 mime.types 的配置文件，该文件定义了许多常见文件类型及其关联的 MIME 类型。这样，Nginx 就可以根据文件扩展名自动确定响应的 MIME 类型。

default_type application/octet-stream;：如果 Nginx 找不到与请求的文件扩展名匹配的 MIME 类型，它将使用 application/octet-stream 作为默认 MIME 类型。这个 MIME 类型通常用于二进制文件或不可识别类型的文件。

主要是第一个配置项。

最终nginx配置如下即可：

http {
    include       mime.types;
    default_type  application/octet-stream;

    # ... 其他 http 配置 ...

    server {
        listen       80;
        server_name  example.com;

        # ... 该虚拟主机的其他配置 ...

        location / {
            # ... 路由配置 ...
        }
    }

    # ... 其他虚拟主机配置 ...
}