【Vite】快速入门及其配置

概述

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 

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

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

相关文章

驱动程序在\device\raidport1 上检测到控制器错误

&#x1f3c6;本文收录于《CSDN问答解答》专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收藏&…

全新UI自助图文打印系统小程序源码/自助云打印机前后端源码

全新UI自助图文打印系统小程序源码&#xff0c;自助云打印机前后端源码。最新的自助图文打印系统和证件照云打印小程序源码采用了PHP作为后端开发语言&#xff0c;旨在为用户提供全面的自助打印服务。 这些服务覆盖了多种文件格式&#xff0c;包括文档、图片、表格等。除此之外…

pipeline:无题

这里写自定义目录标题 复盘我是如何做的撰写评审文档O-KR-KA任务网络图与计划资源需求 && 风险项资源需求风险项 其他 讨论、评审文档撰写评审纪要、结论 反思 复盘 目前工作中的一个现状是&#xff0c;在季度开始的时候需要自己思考方向、规划工作&#xff1b;可能还需…

手机接Usb hub再连接电脑下D+D-波形

&#x1f3c6;本文收录于《CSDN问答解答》专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收藏&…

医联体信息平台建设方案PPT(54页)

文章摘要&#xff1a; 医联体信息平台现状当前医联体信息平台存在脱离医疗业务建设的倾向&#xff0c;导致信息孤岛&#xff0c;业务协同困难。 建设存在的问题主要问题包括健康档案无法动态更新和共享&#xff0c;信息系统之间信息共享和协同不足。 医联体信息平台建设方案方…

堆及堆的管理

堆的作用 堆是用来作为存储空间的 堆的创建与释放 分离的空闲空间的管理建议使用链表 在链表中指定空间大小及下一块空闲链表

2.3 大模型硬件基础:AI芯片(上篇) —— 《带你自学大语言模型》系列

本系列目录 《带你自学大语言模型》系列部分目录及计划&#xff0c;完整版目录见&#xff1a;带你自学大语言模型系列 —— 前言 第一部分 走进大语言模型&#xff08;科普向&#xff09; 第一章 走进大语言模型 1.1 从图灵机到GPT&#xff0c;人工智能经历了什么&#xff1…

Qt创建列表,通过外部按钮控制列表的选中下移、上移以及左侧图标的显现

引言 项目中需要使用列表QListWidget,但是不能直接拿来使用。需要创建一个列表,通过向上和向下的按钮来向上或者向下移动选中列表项,当当前项背选中再去点击确认按钮,会在列表项的前面出现一个图标。 实现效果 本实例实现的效果如下: 实现思路 思路一 直接采用QLis…

day5 分布式节点

文章目录 1 流程回顾2 抽象 PeerPicker3 节点选择与 HTTP 客户端4 实现主流程5 main 函数测试。6 QA 本文代码地址&#xff1a; 本文是7天用Go从零实现分布式缓存GeeCache的第五篇。 注册节点(Register Peers)&#xff0c;借助一致性哈希算法选择节点。实现 HTTP 客户端&…

CTF-Web习题:[BJDCTF2020]Mark Loves cat

题目链接&#xff1a;Mark Loves cat 解题思路 访问靶机网站后得到如下页面&#xff1a; 先浏览网页&#xff0c;发现最下面有一个"dog"字样&#xff0c;此时翻看源码并没有什么发现 那就例行进行目录扫描&#xff0c;源码泄露扫描&#xff0c;用dirsearch目录扫…

威尔史密斯太太贾达平特:友谊在迷恋浪漫的世界中很重要 坦言与威尔·史密斯20多年婚姻中犯下的错误

这位威尔史密斯的太太、著名演员兼音乐家贾达萍克特史密斯 (Jada Pinkett Smith) 因其在 Facebook Watch 系列《Red Table Talk》中的直言不讳而闻名&#xff0c;她的表达方式证明了她的诚实以及她渴望说出自己的想法。 这段揭露真相的视频讲述了她与威尔史密斯 (Will Smith) …

在LabVIEW中实现图像矫正

在LabVIEW中实现图像矫正&#xff0c;特别是将倾斜的笔记本图像&#xff08;如左图&#xff09;校正为正视图像&#xff08;如右图&#xff09;&#xff0c;通常需要以下几个步骤&#xff1a; 1. 获取图像 使用图像采集设备或加载图像文件来获取图像数据。 2. 图像预处理 对…

鸿蒙语言基础类库:【@system.storage (数据存储)】

数据存储 说明&#xff1a; 从API Version 6开始&#xff0c;该模块不再维护&#xff0c;可以使用模块[ohos.data.storage]。在API Version 9后&#xff0c;推荐使用新模块[ohos.data.preferences]。本模块首批接口从API version 3开始支持。后续版本的新增接口&#xff0c;采用…

鸿蒙OpenHarmony Native API【HiLog】

HiLog Overview Description: HiLog模块实现日志打印功能。 开发者可以通过使用这些接口实现日志相关功能&#xff0c;输出日志时可以指定日志类型、所属业务领域、日志TAG标识、日志级别等。 syscap SystemCapability.HiviewDFX.HiLog Since: 8 Summary Files File …

springboot服务如何执行sql脚本文件

当sql脚本文件包含不同数据库实例sql时&#xff0c;遍历读取sql文件再插入时&#xff0c;由于是不同的数据库实例这种方式就不行了&#xff0c;这时就需要程序直接执行sql脚本。 springboot执行sql脚本 /*** 执行sql脚本* throws SQLException*/ private void executeSqlScri…

电脑永久性不小心删除了东西还可以恢复吗 电脑提示永久性删除文件怎么找回 怎么恢复电脑永久删除的数据

永久删除电脑数据的操作&#xff0c;对于很多常用电脑设备的用户来说&#xff0c;可以说时有发生&#xff01;但是&#xff0c;因为这些情况大都发生在不经意间&#xff0c;所以每每让广大用户感觉到十分苦恼。永久删除也有后悔药&#xff0c;轻松找回电脑中误删的文件。恢复文…

C#定时发送邮件功能

C#定时发送邮件功能 背景 自动运维监控客户端在自动关闭时&#xff0c;需要给实施同学发送提醒邮件。支持163邮箱、qq邮箱、火狐邮箱等各种通用邮箱。 定时器发送邮件 代码 邮件功能模块 using ITSLog.LogManage; using System; using System.Collections.Generic; using…

使用Python创建和扫描二维码

二维码&#xff08;Quick Response code&#xff09;已成为在物理和数字领域之间架起桥梁的多功能工具。从分享联系信息和网站链接到促进支付和跟踪库存&#xff0c;二维码在各个行业中找到了应用。通过利用Python的功能&#xff0c;用户可以自动化生成个性化的二维码&#xff…

git clone超时的解决方法

问题描述&#xff1a;在克隆一个仓库的时候&#xff0c;报错如下 git clone https://github.com/TeamWiseFlow/wiseflow.git Cloning into wiseflow... fatal: unable to access https://github.com/TeamWiseFlow/wiseflow.git/: Failed to connect to github.com port 443 aft…

【单片机毕业设计选题24074】-基于阿里云的空气质量监控系统

系统功能: 手机开启2.4G WiFi热点后再给系统上电 系统操作说明&#xff1a; 上电后OLED显示 “欢迎使用空气监控系统请稍后”&#xff0c;两秒后显示Connecting...表示 正在连接阿里云&#xff0c;正常连接阿里云后显示第一页面&#xff0c;如长时间显示Connecting...请 检…