【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,一经查实,立即删除!

相关文章

2024-7-20 IT新闻

目录 微软全球IT系统故障 中国量子计算产业峰会召开 其他IT相关动态 微软全球IT系统故障 后续处理&#xff1a; 微软和CrowdStrike均迅速响应&#xff0c;发布了相关声明并部署了修复程序。CrowdStrike撤销了有问题的软件更新&#xff0c;以帮助用户恢复系统正常运作。微软也…

对Spring、SpringMVC、MyBatis框架的介绍与解释

目录 Spring、SpringMVC、MyBatis框架的介绍与解释 一、Spring框架概述 1. 控制反转&#xff08;IoC&#xff09; 2. 面向切面编程&#xff08;AOP&#xff09; 3. 模块化设计 二、SpringMVC框架概述 1. 请求处理 2. 视图解析 3. 数据绑定与验证 三、MyBatis框架概述 1.…

前端性能优化--懒加载

前端性能优化–懒加载 1&#xff09;图片懒加载 图片压缩网站 TinyPNG 网站: https://tinypng.com/ 1、它的大致实现方式是首先把图片的真实路径存储在 data-src 的自定义属性中&#xff0c;同时将图片的默认 src 设置为 1 张 1px*1px 的透明图片用作占位符&#xff0c;以防止…

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

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

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

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

pipeline:无题

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

探索现代Web开发:WebKit的剪贴板API革新

探索现代Web开发&#xff1a;WebKit的剪贴板API革新 在当今的Web开发领域&#xff0c;用户体验的提升是开发者们不懈追求的目标。其中一个关键的交互点便是剪贴板操作&#xff0c;它允许用户在网页与本地系统之间复制和粘贴数据。WebKit&#xff0c;作为Safari、QQ浏览器等众多…

手机接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…

【笔记-Java】LinkedHashMap

Author&#xff1a;赵志乾 Date&#xff1a;2024-07-19 Declaration&#xff1a;All Right Reserved&#xff01;&#xff01;&#xff01; 1. 简介 LinkedHashMap实现了Map接口&#xff0c;内部维护了一个双向链表来记录插入顺序或访问顺序&#xff08;却决于构造函数的配置&…

bug等级和优先级

一、bug的等级 1、致命 这类bug是最严重的&#xff0c;通常导致系统无法运行、主要功能失效或严重资源不足。举例包括软件在安装过程中崩溃&#xff0c;导致无法完成安装&#xff1b;登录功能失效&#xff0c;用户无法验证身份进入系统&#xff1b;主要功能模块&#xff08;如…

ChatGPT:Stream 和 数据源

ChatGPT&#xff1a;Stream 和 数据源 请看这段代码&#xff0c;需要注意的是&#xff0c;排序只创建了一个排列好后的 Stream&#xff0c;而不会影响原有的数据源&#xff0c;排序之后原数据 stringList 是不会被修改的&#xff0c;如果这样的话&#xff0c;不会造成内存的浪费…

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

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

【算法】浅析贪心算法

贪心算法&#xff1a;高效解决问题的策略 1. 引言 在计算机科学和优化领域&#xff0c;贪心算法是一种常用的解决问题的策略。它以当前情况为基础&#xff0c;做出最优选择&#xff0c;从而希望最终结果也是最优的。本文将带你了解贪心算法的原理、使用方法及其在实际应用中的…

SDL常用结构体和函数接口

1. 结构体 SDL_Window&#xff1a;SDL库中用于表示应用程序窗口的结构体。它封装了一个操作系统窗口的所有属性和功能&#xff0c;是创建图形用户界面的基础。通过创建一个SDL_Window&#xff0c;开发者可以定义窗口的初始大小、位置、是否全屏、是否具有边框等属性&#xff0…

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) …