nuxt3使用记录六:禁用莫名其妙的Tailwind CSS(html文件大大减小)

发现这个问题是因为,今天我突然很好奇,我发现之前构建的自动产生的200.html和404.html足足290k,怎么这么大呢?不是很占用我带宽?

一个啥东西都没有的静态页面,凭啥这么大!所以我就想着手动把他改了,随便返回个page not found就行了

于是我就用编辑器打开这个文件,就好奇是啥玩意这么大,此时看到很奇怪的一个style引用:
在这里插入图片描述
我也没引用这玩意呀,怎么打包个页面,还把开源协议MIT License都给带上,嫌我文件不够大吗?

我全局搜索我的项目,都没有引用这玩意!

于是我就试着把它删掉(删掉后页面直接从290k减到2k,我已经怀疑他把整个css给打包进来了!否则怎么连开源协议都有),看看对页面有啥影响,结果,毫无影响!

然后我检查每个html文件,结果每个文件都有它!

然后我记得在官网看过它,去搜索,果然,这些nuxt自带的一个样式,不过没说为啥要引用他。

然后摸索中,我发现每次运行项目时,都会提示:

Using default Tailwind CSS file                                                                                                                                              nuxt:tailwindcss 20:17:10➜ DevTools: press Shift + Alt + D in the browser (v1.1.5)                     ℹ Tailwind Viewer: http://localhost:10000/_tailwind/ 

平时没注意看,这时候看,猜测是nuxt的默认配置就会加载这玩意,关键我想不明白一个css,为啥要默认加载呢?我的整个页面都没依赖它的样式呀!

然后去nuxt官网和Tailwind CSS的官网里找关掉它的方法,几经尝试,终于找到:

export default defineNuxtConfig({tailwindcss: {cssPath: false,},.......
})

这样打包之后就没玩意了,测试发现对项目没啥影响。
此时再运行项目,它的提示是:

No Tailwind CSS file found. Skipping...                                                                                                                                      nuxt:tailwindcss 20:25:44➜ DevTools: press Shift + Alt + D in the browser (v1.1.5)         ℹ Tailwind Viewer: http://localhost:10000/_tailwind/ 

看到是跳过了这玩意,所以nuxt3这玩意,还有很多可以琢磨的地方,50k star的成熟项目也有不成熟的地方嘛

其实我发现打包文件里还有冗余,比如图片中tailwindcss v3.4.3下面那个style,也不是我写的,我试着删掉,发现对项目也没影响,而且也是每个html文件都有。但是还不知道怎么去掉它。继续琢磨

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/318746.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

OpenWRT有线桥接部署教程

前言 之前咱们讲到OpenWRT部署WAN实现PPPoE拨号上网和自动获取IP模式上网的办法: OpenWRT设置PPPoE拨号教程 OpenWRT设置自动获取IP,作为二级路由器 这一次,咱们尝试用OpenWRT有线桥接上一级路由器的教程。 可能有小伙伴敏锐地发现了&am…

【软件工程】详细设计

目录 前言详细设计算法设计工具——判定表 前言 软件工程生命周期分为八个阶段: 问题定义—>可行性研究—>需求分析 —>概要设计—>详细设计—>编码与单元测试 —>综合测试—>软件维护 这节我们讲的是软件开发流程中的一个阶段,需求…

Docker-Compose编排LNMP并部署WordPress

前言 随着云计算和容器化技术的快速发展,使用 Docker Compose 编排 LNMP 环境已经成为快速部署 Web 应用程序的一种流行方式。LNMP 环境由 Linux、Nginx、MySQL 和 PHP 组成,为运行 Web 应用提供了稳定的基础。本文将介绍如何通过 Docker Compose 编排 …

C语言 | Leetcode C语言题解之第66题加一

题目: 题解: /*** Note: The returned array must be malloced, assume caller calls free().*/ int* plusOne(int* digits, int digitsSize, int* returnSize){for(int i digitsSize - 1; i > 0; --i){digits[i] digits[i] 1;//最后元素1判断是不…

ssh远程访问windows系统下的jupyterlab

网上配置这一堆那一堆,特别乱,找了好久整理后发在这里 由于既想打游戏又想做深度学习,不舍得显卡性能白白消耗,这里尝试使用笔记本连接主机 OpenSSH 最初是为 Linux 系统开发的,现在也支持包括 Windows 和 macOS 在内…

开源博客项目Blog .NET Core源码学习(20:App.Hosting项目结构分析-8)

本文学习并分析App.Hosting项目中后台管理页面的个人资料页面、修改密码页面。 个人资料页面 个人资料页面用于显示和编辑个人信息,支持从本地上传个人头像。整个页面使用了layui中的表单、日期与时间选择、上传等样式或模块,通过layui.css文件设置样式…

Rust Web开发实战:打造高效稳定的服务端应用

Rust Web开发实战:打造高效稳定的服务端应用 本书将带领您从零开始构建Web应用程序,无论是API、微服务还是单体应用,都将一一涵盖。您将学到如何优雅地对外开放API,如何连接数据库以安全存储数据,以及如何对应用程序进…

MLP实现fashion_mnist数据集分类(2)-函数式API构建模型(tensorflow)

使用函数式API构建模型,使得模型可以处理多输入多输出。 1、查看tensorflow版本 import tensorflow as tfprint(Tensorflow Version:{}.format(tf.__version__)) print(tf.config.list_physical_devices())2、fashion_mnist数据集分类模型 2.1 使用Sequential构建…

用git上传本地文件到github

两种方式:都需要git软件(1)VScode上传 (2)直接命令行,后者不需要VScode软件 (1)vscode 上传非常方便,前提是下载好了vscode和git软件 1 在项目空白处右击,弹…

深度学习:基于TensorFlow、Keras,使用长短期记忆神经网络模型(LSTM)对Microsoft股票进行预测分析

前言 系列专栏:机器学习:高级应用与实践【项目实战100】【2024】✨︎ 在本专栏中不仅包含一些适合初学者的最新机器学习项目,每个项目都处理一组不同的问题,包括监督和无监督学习、分类、回归和聚类,而且涉及创建深度学…

【Redis面试题】Redis常见的一些高频面试题

分享几个Redis入门级常见面试过程中遇到的题目! 你项目中哪里使用到了redis?可以讲一讲嘛 这个题目无论是大公司还是小公司都经常考,建议大家根据自己的项目做总结 redis的几种基础数据结构 redis为什么那么快? 1.基于内存实现:我们都知道内存读写是…

如何在postman上提交文件格式的数据

如何在postman上提交文件格式的数据 今天在写一个文件上传的功能接口时,想用postman进行提交,花了些时间才找到在postman提交文件格式的数据。记录一下吧! 1.打开postman,选择POST提交方式,然后在Params那一行的Head…

protobuf在配置文件管理上的应用

TextFormat::ParseFromString 是 Google Protocol Buffers(通常简称为 Protobuf)库中的一个函数,用于从文本格式解析消息。Protobuf 是一种用于序列化结构化数据的库,它允许你定义数据的结构,然后自动生成源代码来处理…

可视化大屏应用场景:智慧安防,保驾护航

hello,我是大千UI工场,本篇分享智慧安防的大屏设计,关注我们,学习N多UI干货,有设计需求,我们也可以接单。 实时监控与预警 可视化大屏可以将安防系统中的监控画面、报警信息、传感器数据等实时展示在大屏上…

【C++】学习笔记——string_5

文章目录 六、string类7. string类的模拟实现8. string类的模拟实现的完整代码string.h头文件test.c源文件 9. string收尾写时拷贝 未完待续 六、string类 7. string类的模拟实现 我们之前讲了实现 insert ,但是那个插入函数仅仅是在 pos 位置插入一个字符而且&am…

SpirngBoot整合快递100

目录 一、注册快递100 二、技术文档地址 三、需要认证的key和comcumer 四、spring boot 整合快递 100使用 4.1 引入快递100和hutool的依赖 4.2 将key和comcumer写入application.properties文件中 4.3 新建一个modle,用于将查出来的json数据转成对象 4.4 新建一个controll…

网络安全实训Day16

网络空间安全实训-渗透测试 漏洞扫描 定义 扫描和探测目标范围内的主机存在哪些安全漏洞,或扫描目标范围内的那些主机存在某个指定的漏洞 漏扫工具 AWVS APPScan MSF 使用MSF扫描漏洞并利用 1.搜索需要的攻击模块 search ms17-010 2.使用攻击模块 use 模块名称…

Python 植物大战僵尸

文章目录 效果图项目结构实现思路源代码 效果图 项目结构 实现思路 下面是代码的实现思路: 导入必要的库和模块:首先,我们导入了Python的os、time库以及pygame库,还有植物大战僵尸游戏中用到的各个植物和僵尸的类。 初始化游戏和…

ElasticSearch01(ES简介,安装ES,操作索引,操作文档,RestAPI)【全详解】

目录 一、ES简介 1. 数据库查询的问题 2. ES简介 1 ElasticSearch简介 2 ElasticSearch发展 3. 倒排索引【面试】 1 正向索引 2 倒排索引 4. ES和MySql 5. 小结 二、安装ES 1. 方式1:使用docker安装 1 准备工作 2 创建ElasticSearch容器 3 给ElasticSearch配置i…

有限单元法-编程与软件应用(崔济东、沈雪龙)【PDF下载】

专栏导读 作者简介:工学博士,高级工程师,专注于工业软件算法研究本文已收录于专栏:《有限元编程从入门到精通》本专栏旨在提供 1.以案例的形式讲解各类有限元问题的程序实现,并提供所有案例完整源码;2.单元…