vite前端UI框架使用详解(2024-05-24)

Vite(发音同 "veet")是一种新型前端构建工具,能够显著提升前端开发体验。它主要由两部分组成:

  • 一个开发服务器,它基于原生的ES模块提供了丰富的内建功能,如速度快到惊人的 模块热更新(HMR)。

  • 一套构建指令,它使用Rollup打包你的代码,并且它是预配置的,可输出用于生产环境的高度优化过的静态资源。

vite的开发服务器​

在当前目录下启动 Vite 开发服务器。vite dev 和 vite serve 是 vite 的别名。​

vite [root]
选项
--host [host]指定主机名称 (string)
--port <port>指定端口 (number)
--open [path]启动时打开浏览器 (boolean | string)
--cors启用 CORS (boolean)
--strictPort如果指定的端口已在使用中,则退出 (boolean)
--force强制优化器忽略缓存并重新构建 (boolean)
-c, --config <file>使用指定的配置文件 (string)
--base <path>公共基础路径(默认为:/)(string)
-l, --logLevel <level>info | warn | error | silent (string)
--clearScreen允许或禁用打印日志时清除屏幕 (boolean)
--profile启动内置的 Node.js 调试器(查看 性能瓶颈)
-d, --debug [feat]显示调试日志 (string | boolean)
-f, --filter <filter>过滤调试日志 (string)
-m, --mode <mode>设置环境模式 (string)
-h, --help显示可用的 CLI 选项
-v, --version显示版本号

vite build

构建生产版本。​

vite build [root]
选项
--target <target>编译目标(默认为:"modules")(string)
--outDir <dir>输出目录(默认为:dist)(string)
--assetsDir <dir>在输出目录下放置资源的目录(默认为:"assets")(string)
--assetsInlineLimit <number>静态资源内联为 base64 编码的阈值,以字节为单位(默认为:4096)(number)
--ssr [entry]为服务端渲染配置指定入口文件 (string)
--sourcemap [output]构建后输出 source map 文件(默认为:false)(boolean | "inline" | "hidden")
--minify [minifier]允许或禁用最小化混淆,或指定使用哪种混淆器(默认为:"esbuild")(boolean | "terser" | "esbuild")
--manifest [name]构建后生成 manifest.json 文件 (boolean | string)
--ssrManifest [name]构建后生成 SSR manifest.json 文件 (boolean | string)
--emptyOutDir若输出目录在根目录外,强制清空输出目录 (boolean)
-w, --watch在磁盘中模块发生变化时,重新构建 (boolean)
-c, --config <file>使用指定的配置文件 (string)
--base <path>公共基础路径(默认为:/)(string)
-l, --logLevel <level>Info | warn | error | silent (string)
--clearScreen允许或禁用打印日志时清除屏幕 (boolean)
--profile启动内置的 Node.js 调试器(查看 性能瓶颈)
-d, --debug [feat]显示调试日志 (string | boolean)
-f, --filter <filter>过滤调试日志 (string)
-m, --mode <mode>设置环境模式 (string)
-h, --help显示可用的 CLI 选项

vite optimize

预构建依赖。​

vite optimize [root]
选项
--force强制优化器忽略缓存并重新构建 (boolean)
-c, --config <file>使用指定的配置文件 (string)
--base <path>公共基础路径(默认为:/)(string)
-l, --logLevel <level>Info | warn | error | silent (string)
--clearScreen允许或禁用打印日志时清除屏幕 (boolean)
-d, --debug [feat]显示调试日志 (string | boolean)
-f, --filter <filter>过滤调试日志 (string)
-m, --mode <mode>设置环境模式 (string)
-h, --help显示可用的 CLI 选项

vite preview

本地预览构建产物。不要将其用作生产服务器,因为它不是为此而设计的。

vite preview [root]
选项
--host [host]指定主机名称 (string)
--port <port>指定端口 (number)
--strictPort如果指定的端口已在使用中,则退出 (boolean)
--open [path]启动时打开浏览器 (boolean | string)
--outDir <dir>输出目录(默认为:dist)(string)
-c, --config <file>使用指定的配置文件 (string)
--base <path>公共基础路径(默认为:/)(string)
-l, --logLevel <level>Info | warn | error | silent (string)
--clearScreen允许或禁用打印日志时清除屏幕 (boolean)
-d, --debug [feat]显示调试日志 (string | boolean)
-f, --filter <filter>过滤调试日志 (string)
-m, --mode <mode>设置环境模式 (string)
-h, --help显示可用的 CLI 选项

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

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

相关文章

【Linux安全】Firewalld防火墙

目录 一.Firewalld概述 二.Firewalld和iptables的关系 1.firewalld和iptables的联系 2.firewalld和iptables的区别 三.Firewalld区域 1.概念 2.九个区域 3.区域介绍 4.Firewalld数据处理流程 四.Firewalld-cmd命令行操作 1.查看 2.增加 3.删除 4.修改 五.Firewa…

arping 一键检测网络设备连通性(KALI工具系列二)

目录 1、KALI LINUX简介 2、arping工具简介 3、在KALI中使用arping 3.1 目标主机IP&#xff08;win&#xff09; 3.2 KALI的IP 4、操作示例 4.1 IP测试 4.2 ARP测试 4.3 根据存活情况返回 5、总结 1、KALI LINUX简介 Kali Linux 是一个功能强大、多才多艺的 Linux 发…

表现层框架设计之使用XML设计表现层

使用XML设计表现层&#xff0c;统一Web Form与Windows Form的外观。 1.XML&#xff08;可扩展标记语言&#xff09; XML&#xff08;可扩展标记语言&#xff09;与HTML类似&#xff0c;是一种标记语言。与主要用于控制数据的显示和外观的HTML标记不同&#xff0c;XML标记用于定…

PostgreSQL的扩展(extensions)-常用的扩展之pg_rman

PostgreSQL的扩展&#xff08;extensions&#xff09;-常用的扩展之pg_rman pg_rman 是 PostgreSQL 社区提供的一个备份和恢复管理工具。它能够简化和自动化 PostgreSQL 数据库的备份和恢复过程&#xff0c;并支持全量备份、增量备份和差异备份。pg_rman 提供了方便的命令行接…

【机器学习与大模型】驱动下的电子商务应用

摘要&#xff1a; 随着信息技术的飞速发展&#xff0c;电子商务已经成为当今商业领域中最为活跃和重要的部分之一。而机器学习和大模型的出现&#xff0c;为电子商务带来了新的机遇和挑战。本文深入探讨了机器学习与大模型在电子商务中的应用&#xff0c;包括个性化推荐、精准营…

Java 18:开启Java平台的新纪元

Java 18&#xff1a;探索Java平台的最新飞跃 随着Java 18的发布&#xff0c;Java平台再次证明了其不断创新和适应现代软件开发需求的能力。作为长期支持&#xff08;LTS&#xff09;版本&#xff0c;Java 18不仅带来了性能上的提升&#xff0c;还引入了一系列令人兴奋的新特性…

基于双向长短期记忆 Bi-LSTM 对消费者投诉进行多类分类

前言 系列专栏:【深度学习:算法项目实战】✨︎ 涉及医疗健康、财经金融、商业零售、食品饮料、运动健身、交通运输、环境科学、社交媒体以及文本和图像处理等诸多领域,讨论了各种复杂的深度神经网络思想,如卷积神经网络、循环神经网络、生成对抗网络、门控循环单元、长短期记…

CSS transform 三大属性 rotate、scale、translate

transform 浏览器支持定义和用法translate位移函数rotate旋转函数scale缩放函数 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。 定义和用法 transform 属性向元素应用 2D…

在chrome中查找和验证xpath

1、快速获取XPath表达式 按F12打开chrome浏览器的开发者模式&#xff0c;点击选择光标&#xff0c;选择页面上的元素位置&#xff0c;在控制台右键选择Copy XPath&#xff0c;表达式就复制到粘贴板中了。 获取到的xpath路径&#xff1a;//*[id"hotsearch-content-wrapper…

iOS App上架全流程及审核避坑指南

App Store作为苹果官方的应用商店&#xff0c;审核严格周期长一直让用户头疼不已&#xff0c;很多app都“死”在了审核这一关&#xff0c;那我们就要放弃iOS用户了吗&#xff1f;当然不是&#xff01;本期我们从iOS app上架流程开始梳理&#xff0c;详细了解下iOS app上架的那些…

6.1 if语句

计算机语言和人类语言类似&#xff0c;人类语言是为了解决人与人之间交流的问题&#xff0c;而计算机语言是为了解决程序员与计算机之间交流的问题。程序员编写的程序就是计算机的控制指令&#xff0c;控制计算机的运行。借助于编译工具&#xff0c;可以将各种不同的编程语言的…

基础入门三大核心之HTML篇:WebP格式图像全面解析 —— 起源、优势、兼容性及在线压缩方法

基础入门三大核心之HTML篇&#xff1a;WebP格式图像全面解析 —— 起源、优势、兼容性及在线压缩方法 欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以…

冯喜运:5.24黄金今日能否回调?日内国际黄金美原油操作策略

【黄金消息面分析】&#xff1a;在过去的半个世纪里&#xff0c;美国国债作为买入持有的投资手段&#xff0c;轻松超越了黄金。然而&#xff0c;如今债券作为终极避险资产的地位正面临着前所未有的挑战。传统上&#xff0c;投资者将美国国债视为一种超安全的投资&#xff0c;因…

Java高级面试精粹:问题与解答集锦(二)

Java面试问题及答案 1. 什么是Java内存模型&#xff08;JMM&#xff09;&#xff1f;它的作用是什么&#xff1f; 答案&#xff1a; Java内存模型&#xff08;JMM&#xff09;定义了Java虚拟机&#xff08;JVM&#xff09;在计算机内存中的工作方式&#xff0c;包括程序计数器…

【源码+文档+讲解】垃圾分类系统SSM

目 录 摘 要 前 言 第1章 概述 1.1 研究背景 1.2 研究目的 1.3 研究内容 4 第二章 开发技术介绍 5 2.1Java技术 6 2.2 Mysql数据库 6 2.3 B/S结构 7 2.4 SSM框架 8 第三章 系统分析 3.1 可行性分析 3.1.1 技术可行性 3.1.2 经济可行性 3.1.3 操作可行性 3.2 系统…

Word让标题3现形

1 2这个玩意儿是管理样式&#xff08;你找得我好惨啊啊啊啊&#xff09; 3点推荐

MINLP(Mixed-Integer Nonlinear Programming,混合整数非线性规划)

MINLP&#xff08;Mixed-Integer Nonlinear Programming&#xff0c;混合整数非线性规划&#xff09;问题是一类包含整数变量和连续变量的非线性优化问题。它结合了整数规划&#xff08;IP&#xff09;和非线性规划&#xff08;NLP&#xff09;的特征&#xff0c;因而比单纯的整…

基于Vue的图片文件上传与压缩组件的设计与实现

摘要 随着前端技术的发展&#xff0c;系统开发的复杂度不断提升&#xff0c;传统开发方式将整个系统做成整块应用&#xff0c;导致修改和维护成本高昂。组件化开发作为一种解决方案&#xff0c;能够实现单独开发、单独维护&#xff0c;并能灵活组合组件&#xff0c;从而提升开…

JS-02对象的基本使用

目录 1 创建一个对象 2 对象属性操作 2.1 获取属性 第一种方式&#xff1a;.语法 第二种方式&#xff1a;[]语法 2种方式的差异 2.2 设置属性 2.3 删除属性 3 案例 1 创建一个对象 创建一个对象&#xff0c;包含了两个属性&#xff0c;两个方法&#xff1a; var studen…

17. FastDFS面试题汇总

Java全栈面试题汇总目录-CSDN博客 1. 什么是FastDFS&#xff1f; FastDFS是用C语言编写的一款开源的分布式文件系统。FastDFS为互联网量身定制&#xff0c;充分考虑了冗余备份、负载均衡、线性扩容等机制&#xff0c;并注重高可用、高性能等指标&#xff0c;使用FastDFS很容易…