当前位置： 首页 > news >正文

【Vite】快速入门及其配置

news 文章来源：https://blog.csdn.net/XiugongHao/article/details/140567942 2025/2/12 20:07:16

概述

Vite是前端构建工具。vite

相较于webpack,vite采用了不同的运行方式：

  • 开发时，并不对代码打包，而是直接采用ESM的方式来运行项目
  • 在项目打包部署时，使用 rollup 对项目进行打包
  • 除了速度外，vite使用起来也更加方便

默认项目源码目录就是根目录，而不像 webpack 那样是 src 目录。

我们可以初始化一个工程：

npm init 
npm i vite -D

在这里插入图片描述

<html lang="en"><head><meta charset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><scripttype="module"src=./index.js></script>
</head><body><h1>Vite demo</h1>
</body></html>

document.body.insertAdjacentHTML('beforeend', '<h1>Hello Vite!</h1>')

然后执行 ：

npx vite

启动项目，并且自动支持热更新和启动服务器。

在这里插入图片描述

npx vite build进行项目打包，且使用 的是 ESM。但是 ESM 必须通过 url的方式进行加载，也就是说，使用打包后的 html 不能运行项目，必须使用 http / https 才可以，所以需要通过服务器打开项目。

但是 live server 也不可以，live server 的根目录配置有问题，默认配置的根目录是项目目录，我们还需要改为 dist 目录。

所以要么通过将 dist 放在服务器运行，要么 执行 npx vite preview 运行。

vite是开发服务器，并不对项目进行打包；而vite preview是打包后的预览服务器。

在这里插入图片描述

配置

一般的 style，css(sass, less 等)，图片处理 等一系列常用配置 vite 已经内置了，无需我们手动配置。

要想为传统浏览器提供支持（es6 -> es5），可以按下面这样使用官方插件 @vitejs/plugin-legacy：

$ npm add -D @vitejs/plugin-legacy

// vite.config.js
import legacy from '@vitejs/plugin-legacy'
import { defineConfig } from 'vite'export default defineConfig({plugins: [legacy({targets: ['defaults', 'not IE 11'],}),],
})

legacy 在打包时需要插件 terser（用于压缩代码），所以还需要装：

npm i terser -D

相关文章：

【Vite】快速入门及其配置

概述 Vite是前端构建工具。vite 相较于webpack,vite采用了不同的运行方式&#xff1a; 开发时&#xff0c;并不对代码打包&#xff0c;而是直接采用ESM的方式来运行项目在项目打包部署时&#xff0c;使用 rollup 对项目进行打包除了速度外&#xff0c;vite使用起来也更加方便…...

编程日记 2024/7/21 5:47:04

Armv8/Armv9架构的学习大纲-学习方法-自学路线-付费学习路线

本文给大家列出了Arm架构的学习大纲、学习方法、自学路线、付费学习路线。有兴趣的可以关注&#xff0c;希望对您有帮助。 如果大家有需要的&#xff0c;欢迎关注我的CSDN课程&#xff1a;https://edu.csdn.net/lecturer/6964 ARM 64位架构介绍 ARM 64位架构介绍 ARM架构概况…...

编程日记 2024/7/21 5:46:03

vue 中 ui 组件二次封装后 ref 怎么穿透到子组件里

情景&#xff1a;element-ui 二次封装了 el-table 组件&#xff0c;使用封装组件时&#xff0c;想要调用 el-table 组件内置的一些方法。只在封装组件上定义 ref 是拿不到 el-table 内置方法的。解决方法如下。 1. vue2 封装组件 <template><el-table ref"inn…...

编程日记 2024/7/21 5:44:01

sourcetree中常用功能使用方法及gitlab冲突解决

添加至缓存&#xff1a;等于git add 提交&#xff1a;等于git commit 拉取/获取&#xff1a;等于git pull ,在每次要新增代码或者提交代码前需要先拉取一遍服务器中最新的代码&#xff0c;防止服务器有其他人更新了代码&#xff0c;但我们自己本地的代码在我们更新前跟服务器不…...

编程日记 2024/7/21 5:43:00

SQL Server分布式查询：跨数据库的无缝数据探索

SQL Server分布式查询&#xff1a;跨数据库的无缝数据探索 在当今的企业环境中&#xff0c;数据往往分散在不同的数据库和服务器上。SQL Server的分布式查询功能提供了一种强大的手段&#xff0c;允许用户编写单一的查询来访问和操作分散在不同SQL Server实例中的数据。本文将…...

编程日记 2024/7/21 5:41:59

【字少图多剖析微服务】深入理解Eureka核心原理

深入理解Eureka核心原理 Eureka整体设计Eureka服务端启动Eureka三级缓存Eureka客户端启动 Eureka整体设计 Eureka是一个经典的注册中心&#xff0c;通过http接收客户端的服务发现和服务注册请求&#xff0c;使用内存注册表保存客户端注册上来的实例信息。 Eureka服务端接收的…...

编程日记 2024/7/21 5:38:56

如何在 Linux 中解压 ZIP 文件

ZIP 是一种常用的压缩文件格式&#xff0c;用于存储和传输多个文件。在 Linux 系统中&#xff0c;解压 ZIP 文件非常简单。 使用 unzip 命令 unzip 是一个专用于解压 ZIP 文件的命令行工具。要使用它&#xff0c;请打开终端并输入以下命令&#xff1a; 例如&#xff0c;要解…...

编程日记 2024/7/21 5:37:55

IDEA的APIPost接口测试插件详解

APIPOST官方网址 一、安装APIPost插件 打开IntelliJ IDEA&#xff1a; 启动您的IntelliJ IDEA开发环境。 导航到插件设置&#xff1a; 在Windows或Linux上&#xff0c;点击 File > Settings。在macOS上&#xff0c;点击 IntelliJ IDEA > Preferences。 搜索并安装APIPo…...

编程日记 2024/7/21 5:36:54

[经验] 驰这个汉字的拼音是什么 #学习方法#其他#媒体

驰这个汉字的拼音是什么 驰&#xff0c;是一个常见的汉字&#xff0c;其拼音为“ch”&#xff0c;音调为第四声。它既可以表示动词&#xff0c;也可以表示形容词或副词&#xff0c;意义广泛&#xff0c;经常出现在生活和工作中。下面就让我们一起来了解一下“驰”的含义和用法。…...

编程日记 2024/7/21 5:35:53

生成式人工智能落地校园与课堂的15个场景

生成式人工智能正在重塑教育行业&#xff0c;为传统教学模式带来了革命性的变化。随着AI的不断演进&#xff0c;更多令人兴奋的应用场景将逐一显现&#xff0c;为学生提供更加丰富和多元的学习体验。 尽管AI在教学中的应用越来越广泛&#xff0c;但教师们也不必担心会被完全替代…...

编程日记 2024/7/21 5:32:50

C# 中的事件

1.事件的概念 在C#中&#xff0c;事件是一种特殊的委托类型&#xff0c;用于在对象之间提供一种基于观察者模式的通知机制。事件的发送方定义了一个委托&#xff0c;委托类型的声明包含了事件的签名&#xff0c;即事件处理器方法的签名。事件的订阅者可以通过运算符来注册事件…...

编程日记 2024/7/21 5:31:49

一、单例模式

文章目录 1 基本介绍2 实现方式2.1 饿汉式2.1.1 代码2.1.2 特性 2.2 懒汉式 ( 线程不安全 )2.2.1 代码2.2.2 特性 2.3 懒汉式 ( 线程安全 )2.3.1 代码2.3.2 特性 2.4 双重检查2.4.1 代码2.4.2 特性 2.5 静态内部类2.5.1 代码2.5.2 特性 2.6 枚举2.6.1 代码2.6.2 特性 3 实现的要…...

编程日记 2024/7/21 5:30:48

B树：高效的数据存储结构

在计算机科学中&#xff0c;B树&#xff08;B-Tree&#xff09;是一种平衡多路查找树&#xff0c;它广泛应用于数据库和文件系统等需要高效数据存储和检索的场景。B树的设计旨在优化磁盘I/O操作&#xff0c;通过减少磁盘访问次数来提高数据检索的效率。本文将介绍B树的基本概念…...

编程日记 2024/7/21 5:29:47

[Vulnhub] TORMENT IRC+FTP+CUPS+SMTP+apache配置文件权限提升+pkexec权限提升

信息收集 IP AddressOpening Ports192.168.101.152TCP:21,22,25,80,111,139,143,445,631 $ nmap -p- 192.168.101.152 --min-rate 1000 -sC -sV PORT STATE SERVICE VERSION 21/tcp open ftp vsftpd 2.0.8 or later | ftp-anon: Anonymous FTP login a…...

编程日记 2024/7/21 5:28:46

＜数据集＞安全帽佩戴识别数据集＜目标检测＞

数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;3912张 图片分辨率&#xff1a;640640 标注数量(xml文件个数)&#xff1a;3912 标注数量(txt文件个数)&#xff1a;3912 标注类别数&#xff1a;2 标注类别名称&#xff1a;[no-helmet, helmet] 序号类别名称图片…...

编程日记 2024/7/21 5:23:41

[米联客-安路飞龙DR1-FPSOC] FPGA基础篇连载-21 VTC视频时序控制器设计

软件版本&#xff1a;Anlogic -TD5.9.1-DR1_ES1.1 操作系统&#xff1a;WIN10 64bit 硬件平台&#xff1a;适用安路(Anlogic)FPGA 实验平台&#xff1a;米联客-MLK-L1-CZ06-DR1M90G开发板 板卡获取平台&#xff1a;https://milianke.tmall.com/ 登录“米联客”FPGA社区 ht…...

编程日记 2024/7/21 5:22:40

记录uni-app横屏项目：自定义弹出框

目录 前言&#xff1a; 正文&#xff1a; 前言&#xff1a;横屏的尺寸问题 最近使用了uniapp写了一个横屏的微信小程序和H5的项目&#xff0c;也是本人首次写的横屏项目&#xff0c;多少是有点踩坑不太适应。。。 先说最让我一脸懵的点&#xff0c;尺寸大小&#xff0c;下面一…...

编程日记 2024/7/21 5:21:39

Linux Vim教程（二）：基本命令和操作

目录 1. 进入和退出Vim 1.1 启动Vim 1.2 退出Vim 2. 模式切换 2.1 切换到插入模式 2.2 切换到普通模式 2.3 切换到命令模式 2.4 切换到可视模式 3. 移动光标 4. 编辑文本 4.1 插入和追加文本 4.2 删除文本 4.3 复制和粘贴文本 4.4 撤销和重做 5. 搜索和替换 5.…...

编程日记 2024/7/21 5:20:38

【大模型基础】4.1 数据挖掘（待）

一、什么是文本挖掘？ 文本挖掘指的是从文本数据中获取有价值的信息和知识，它是数据挖掘中的一种方法。文本挖掘中最重要最基本的应用是实现文本的分类和聚类，前者是有监督的挖掘算法，后者是无监督的挖掘算法。 二、文本挖掘的作用是什么？ 能够从文本数据中获取有价值的…...

编程日记 2024/7/21 5:18:36

Jupyter Notebook与机器学习：使用Scikit-Learn构建模型

Jupyter Notebook与机器学习&#xff1a;使用Scikit-Learn构建模型 介绍 Jupyter Notebook是一款强大的交互式开发环境&#xff0c;广泛应用于数据科学和机器学习领域。Scikit-Learn是一个流行的Python机器学习库&#xff0c;提供了简单高效的工具用于数据挖掘和数据分析。本…...

编程日记 2024/7/21 5:17:35

IMU提升相机清晰度

近期&#xff0c;一项来自北京理工大学和北京师范大学的团队公布了一项创新性的研究成果&#xff0c;他们将惯性测量单元&#xff08;IMU&#xff09;和图像处理算法相结合&#xff0c;显著提升了非均匀相机抖动下图像去模糊的准确性。 研究团队利用IMU捕捉相机的运动数据&…...

编程日记 2024/7/21 5:15:34

掌握SQL Server性能监控：自定义性能计数器的实现

掌握SQL Server性能监控&#xff1a;自定义性能计数器的实现 在数据库管理中&#xff0c;监控数据库性能是确保系统稳定运行的关键。SQL Server提供了丰富的性能监控工具&#xff0c;但有时这些工具可能无法满足特定的监控需求。这时&#xff0c;自定义性能计数器就显得尤为重…...

编程日记 2024/7/21 5:13:31

jdk1.8 List集合Stream流式处理

jdk1.8 List集合Stream流式处理 一、介绍(为什么需要流Stream&#xff0c;能解决什么问题&#xff1f;)1.1 什么是 Stream&#xff1f;1.2 常见的创建Stream方法1.3 常见的中间操作1.4 常见的终端操作 二、创建流Stream2.1 Collection的.stream()方法2.2 数组创建流2.3 静态工厂…...

编程日记 2024/7/21 5:10:05

leetcode位运算(1720. 解码异或后的数组)

前言 经过前期的基础训练以及部分实战练习&#xff0c;粗略掌握了各种题型的解题思路。后续开始专项练习。 描述 未知 整数数组 arr 由 n 个非负整数组成。 经编码后变为长度为 n - 1 的另一个整数数组 encoded &#xff0c;其中 encoded[i] arr[i] XOR arr[i 1] 。例如&am…...

编程日记 2024/7/21 5:09:04

Android 性能优化之卡顿优化

文章目录 Android 性能优化之卡顿优化卡顿检测TraceView配置缺点 StricktMode配置违规代码 BlockCanary配置问题代码缺点 ANRANR原因ANRWatchDog监测解决方案 Android 性能优化之卡顿优化 卡顿检测 TraceViewStricktModelBlockCanary TraceView 配置 Debug.startMethodTra…...

编程日记 2024/7/21 5:06:01

mac电脑显示隐藏文件

方法一&#xff1a; 第一步&#xff1a;打开「终端」应用程序。 第二步&#xff1a;输入如下命令&#xff1a; defaults write com.apple.finder AppleShowAllFiles -boolean true ; killall Finder 第三步&#xff1a;按下「Return」键确认。 现在你将会在 Finder 窗口中…...

编程日记 2024/7/21 5:03:59

深度学习之基础知识整理

现在大语言模型很火&#xff0c;但它的基础仍然是以神经网络为基础的深度学习&#xff0c;不懂神经网络&#xff0c;不了解深度学习&#xff0c;对于大语言模型的二次开发也是整不明白。 那到底需要了解哪些知识&#xff1f;才能看懂深度学习/神经网络的基础模型&#xff0c;想…...

编程日记 2024/7/21 5:02:58

R语言学习笔记9-数据过滤-分组-融合

R语言学习笔记9-数据过滤-分组-融合 数据过滤基础数据过滤条件筛选数据使用dplyr包进行数据操作select 函数filter 函数subset函数 数据分组使用split()进行数据分组使用dplyr包进行数据分组使用data.table包进行数据分组 数据融合使用merge()进行数据融合使用dplyr包进行数据融…...

编程日记 2024/7/21 5:01:57

GESP CCF C++ 八级认证真题 2024年6月

第 1 题 GESP活动期间&#xff0c;举办方从获胜者ABCDE五个人中选出三个人排成一队升国旗&#xff0c;其中A不能排在队首&#xff0c;请问 有多少种排法&#xff1f; A.24 B.48 C.32 D.12 第 2 题 7进制数235转换成3进制数是&#xff08; &#xff09;。 A. 11121 B. 11…...

编程日记 2024/7/21 5:00:56

Spring Boot 单元测试什么时候需要添加 @RunWith

建立 Spring Boot 单元测试方法一般依赖于 JUnit4 或 JUnit5 框架。 在高版本的 Spring Boot 中&#xff0c;一般默认用的是 JUnit5。此时通过添加 SpringBootTest 注解&#xff0c;即可成功注入相关的 bean 对象&#xff0c;并进行测试。 import org.junit.jupiter.api.Test…...

编程日记 2024/7/21 4:59:55

荣泰建设集团网站/郑州seo优化

1)、在两台机子上面分别安装 mysql , keepalived2)、keepalived 主从&#xff1a;主&#xff1a;vim /etc/keepalived/keepalived.confvrrp_instance VI_1 {state BACKUP # 备用用 BACKUPinterface eth2 #用的是哪个网卡virtual_router_id 59 #虚拟路由地址必须一样&…...

编程日记 2025/2/12 17:34:24

南京代理注册公司机构/东莞网站seo技术

整理了一下5年前左右的一些资料 大学期间和研究生期间参加了很多数学建模比赛&#xff0c;放在网盘好久啦&#xff0c;现在把资源共享到Github上面&#xff0c;供大家参考。 github链接&#xff1a;https://github.com/XiaoGongWei/MMP MathematicalModelingPapers 数学建模…...

编程日记 2025/2/12 14:56:03

包装产品做网站/发稿平台

2019独角兽企业重金招聘Python工程师标准>>> <?php function inverse($x) {if (!$x) {throw new Exception(Division by zero.);}return 1/$x; }try {echo inverse(5) . "\n";echo inverse(0) . "\n"; } catch (Exception $e) {echo Caught…...

编程日记 2025/2/12 13:35:07

畅销营销型网站建设电话/属于b2b的网站有哪些

本文实例讲述了jsHTML5 canvas 实现简单的加载条(进度条)功能。分享给大家供大家参考&#xff0c;具体如下&#xff1a;www.jb51.net canvas实现加载条动画/** 获取canvas, canvas本身没有画图能力&#xff0c;相当于一个画布&#xff0c;提供绘制图形的地方* document.getElem…...

编程日记 2025/2/12 12:56:37

个人网站建站指南/制作网站的平台

tess Delaunay(pts)返回的是Delanauy类的对象。你可以检查四面体为tess.simplices。它有不同的属性和方法。例如&#xff0c;在2D中&#xff0c;它可以绘制三角剖分、凸壳和Voronoi细分。在关于四面体最终集合的可视化&#xff0c;我没有找到一个简单的方法&#xff0c;但是我…...

编程日记 2025/2/12 9:51:47

公司想建立一个网站吗/做企业网站建设的公司

转载自&#xff1a;http://chuansongme.com/n/1062752 记得11年的时候在百度知道搜Hadoop相关的问题每天只有零星几个&#xff0c;那会我基本每天都要去看看有没我能回答的问题。现在去百度知道搜索Hadoop已经有800多万个问题。12年的时候我在百度空间发了一篇博文<<给ha…...

编程日记 2025/2/12 8:45:43