Vue3 项目打包style样式丢失

Vue3项目打包 style样式丢失

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

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

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

问题已解决，主要是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 / {
            # ... 路由配置 ...
        }
    }

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

检查一下是否有重名的class名被覆盖了可以换个class名或者加权重!important

【以下回答由 GPT 生成】

尝试解决该问题的步骤如下：

检查样式文件是否正确加载：检查打包后的文件中是否包含样式文件。可以通过查看打包后的文件夹中的dist文件夹来确认。确保样式文件正常存在于打包后的文件中。
检查样式文件路径：确认样式文件在Vue文件中的引入路径是否正确。在Vue文件中引入样式文件时，应该使用相对路径或者绝对路径，确保能够正确找到样式文件。
检查是否正确引入CSS处理器：Vue3默认使用的是PostCSS来处理样式文件，确保已正确配置PostCSS插件。在Vue项目的根目录下的postcss.config.js文件中，检查是否已配置所需的PostCSS插件，例如autoprefixer等。
检查样式文件是否被正确加载：在开发环境下，Vue通常使用<style>标签来加载样式文件。在打包后的文件中，样式文件通常会被提取为一个单独的CSS文件。请确保在Vue文件中正确引入样式文件，例如：

```vue

```

检查CSS类名和选择器的变更：在打包过程中，CSS类名和选择器经常会经过压缩和更改。请确保在Vue文件中的样式定义中，使用的是正确的类名和选择器。
检查是否使用了CSS模块化：如果你在Vue项目中使用了CSS模块化（如使用<style module>标签），则需要在Vue组件中引用对应的CSS类名。请检查是否正确引用了CSS类名。

如果经过以上步骤检查后问题仍未解决，可能需要进一步查看打包过程中的相关配置和日志信息，或者与其他开发者交流以获取帮助。如果你需要更具体的帮助，请提供更多关于你的打包和部署过程的信息，以便进一步进行故障排除。

【相关推荐】

您可以看一下 jason老师的vue通用后台管理课程中的 header组件样式小节

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^