Vue3——Vite篇

Vite是一款由Vue.js的作者尤雨溪开发的前端构建工具，专为现代前端项目而设计。它以其快速的冷启动、按需编译和热更新能力而受到广泛关注。以下是对Vite的详细解析：

一、核心特性

  1. 快速启动：
    • Vite利用浏览器原生支持的ES模块（ESM），在开发环境中无需打包即可启动服务，极大提升了项目启动速度。这是因为Vite只启动一台静态页面的服务器，根据客户端的请求加载不同的模块处理，实现按需加载，避免了Webpack那样一开始就打包整个项目的做法。
  2. 按需编译：
    • 在开发模式下，Vite只编译你正在查看的模块，大大加快了编辑-刷新的循环。这意味着只有当文件发生变化时，相应的模块才会被重新编译，减少了不必要的编译时间。
  3. 热模块替换（HMR）：
    • Vite提供了非常快速的HMR体验，当某个模块内容改变时，只让浏览器去重新请求该模块即可，而不是像Webpack那样重新编译该模块的所有依赖。这几乎做到了无缝的实时更新，提升了开发效率。
  4. 配置简单：
    • Vite的配置文件vite.config.js相较于Webpack更为简洁，降低了入门门槛。同时，Vite支持多种框架（如Vue、React、Preact、Svelte等）和插件扩展，使得开发者可以轻松适配不同项目和需求。
  5. 兼容性良好：
    • Vite通过插件支持，如@vitejs/plugin-legacy，可以自动为不支持原生ESM的浏览器生成传统版本的chunk及相应的polyfill，确保了良好的兼容性。

二、配置文件

Vite的配置文件vite.config.js是Vite项目中的核心配置文件，通过该文件可以对项目的开发服务器、插件系统、打包配置等进行自定义。常见的配置项包括：

  • root：指定项目的根目录。
  • base：指定在开发或生产环境中，应用的公共基础路径。
  • server：自定义Vite开发服务器的行为，包括端口、代理设置等。
  • build：自定义项目的打包行为，如输出目录、代码压缩等。
  • plugins：配置Vite插件，可以是自定义插件或官方/社区提供的插件。

三、使用场景

Vite非常适合用于现代前端项目的开发，特别是在需要快速启动、热更新和良好开发体验的场景下。例如，在开发Vue、React等单页面应用（SPA）时，Vite能够显著提升开发效率，降低开发成本。

四、优缺点

  • 优点：
    • 快速启动和按需编译，提升了开发效率。
    • 支持热模块替换（HMR），实现了无缝的实时更新。
    • 配置简单，降低了入门门槛。
    • 兼容性良好，支持多种框架和插件扩展。
  • 缺点：
    • 由于采用unbundle机制，首屏加载时可能会有一定的性能损耗，不过Vite通过缓存和预构建等方式进行了优化。
    • 不支持CommonJS模块，仅支持ES Module。

五、总结

Vite作为一款现代前端构建工具，以其快速的启动速度、按需编译和热更新能力而受到广泛关注。通过简洁的配置和强大的插件系统，Vite为开发者提供了高效、灵活的开发体验。同时，Vite也具备良好的兼容性和可扩展性，能够满足不同项目和需求的要求。

--------------------------------------------------------------------------------------------------------

Vite是一款由尤雨溪（Vue.js 作者）开发的现代前端构建工具，专为现代前端项目而设计。它提供了极速的开发服务器和高效的构建机制，通过简单直观的配置文件，开发者可以轻松定制开发环境和构建流程。以下是Vite的详细介绍及常见配置项。

Vite简介

  • 极速启动：Vite 利用浏览器原生支持的 ES 模块，在开发环境中无需打包即可启动服务，极大提升了项目启动速度。
  • 模块热更新（HMR）：Vite 支持基于原生 ESM 的模块热替换，实现了快速、无感知的开发体验。
  • 高效构建：Vite 使用 Rollup 进行生产构建，支持按需加载和代码分割，提供了优化的生产环境构建。

Vite 配置文件（vite.config.js）

Vite 的核心配置文件是 vite.config.js，位于项目根目录。这个文件使用 CommonJS 格式或 ES 模块格式导出一个配置对象，用于定义项目的开发服务器、插件系统、打包配置等。

常见配置项

  1. root
    • 作用：指定项目的根目录。
    • 默认值：当前工作目录。
    • 示例：root: './src', 将根目录设置为 src 文件夹。
  2. base
    • 作用：指定在开发或生产环境中，应用的公共基础路径。
    • 默认值：'/'。
    • 示例：base: '/my-app/', 应用将被部署到 /my-app/ 子路径。
  3. server
    • 作用：自定义 Vite 开发服务器的行为。
    • 子配置项：
      • port：指定开发服务器的端口，默认值为 3000。
      • proxy：配置开发服务器的代理设置，解决跨域问题。
      • open：是否在服务器启动时自动打开浏览器。
      • https：是否启用 HTTPS。
      • cors：为开发服务器配置 CORS。
server: {  port: 8080,  proxy: {  '/api': {  target: 'http://localhost:5000',  changeOrigin: true,  rewrite: (path) => path.replace(/^\/api/, ''),  },  },  open: true,  https: false,  cors: true,  
},

 build

  • 作用：自定义项目的打包行为。
  • 子配置项：
    • outDir：指定生产环境打包文件的输出目录，默认值为 dist。
    • minify：代码压缩配置，支持 terser 和 esbuild。
    • assetsDir：指定生成静态资源的存放路径。
    • chunkSizeWarningLimit：规定触发警告的 chunk 大小（以 kbs 为单位）。
build: {  outDir: 'build',  minify: 'esbuild',  assetsDir: 'assets',  chunkSizeWarningLimit: 500,  
},

 plugins

  • 作用：配置 Vite 插件，以扩展其功能。
  • 示例：使用 Vue 插件。
import vue from '@vitejs/plugin-vue';  
export default defineConfig({  plugins: [vue()],  
});

resolve

  • 作用：配置模块解析选项。
  • 子配置项：
    • alias：路径别名替换。
    • extensions：配置导入时想要省略的扩展名列表。
  • 示例：
resolve: {  alias: {  '@': path.resolve(__dirname, 'src'),  'components': path.resolve(__dirname, 'src/components'),  },  extensions: ['.mjs', '.js', '.ts', '.tsx', '.json'],  
},

css

  • 作用：配置 CSS 相关选项。
  • 子配置项：
    • preprocessorOptions：配置 CSS 预处理器选项。
    • modules：启用 CSS 模块化。
  • 示例：

 

css: {  preprocessorOptions: {  scss: {  additionalData: '@import "@/styles/variables.scss";',  },  },  modules: true,  
},

总结

Vite 通过其简洁而强大的配置文件，提供了灵活的配置选项，帮助开发者快速搭建和优化前端项目。以上介绍了 Vite 的常见配置项，包括项目根目录、公共基础路径、开发服务器配置、构建配置、插件系统、模块解析和 CSS 配置等。开发者可以根据项目需求，自定义这些配置项，以提升项目开发效率和最终产品的性能。

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

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

相关文章

ARM单片机的内存分布（重要）

ARM单片机的内存分布（重要）

ARM单片机的内存分布（重要） 一、S32K344的内存布局 MEMORY {int_pflash : ORIGIN 0x00400000, LENGTH 0x003D4000 /* 4096KB - 176KB (sBAF HSE)*/int_dflash : ORIGIN 0x10000000, LENGTH 0x00020000 /* 128KB …
阅读更多...
BUUCTF [SCTF2019]电单车详解两种方法（python实现绝对原创）

BUUCTF [SCTF2019]电单车详解两种方法（python实现绝对原创）

使用audacity打开，发现是一段PT2242 信号 PT2242信号 有长有短，短的为0，长的为1化出来 这应该是截获电动车钥匙发射出的锁车信号 0 01110100101010100110 0010 0前四位为同步码0 。。。中间这20位为01110100101010100110为地址码0010为功…
阅读更多...
不靠学历，不拼年资，怎么才能月入2W？

不靠学历，不拼年资，怎么才能月入2W？

之前统计局发布了《2023年城镇单位就业人员年平均工资情况》，2023年全国城镇非私营单位和私营单位就业人员年平均工资分别为120698元和68340元。也就是说在去年非私营单位就业人员平均月薪1W，而私营单位就业人员平均月薪只有5.7K左右。 图源：…
阅读更多...
两数之和、三数之和、四数之和

两数之和、三数之和、四数之和

目录 两数之和 题目链接 题目描述 思路分析 代码实现 三数之和 题目链接 题目描述 思路分析 代码实现 四数之和 题目链接 题目描述 思路分析 代码实现 两数之和 题目链接 LCR 179. 查找总价格为目标值的两个商品 - 力扣（LeetCode） 题目…
阅读更多...
在Java中如何利用ClassLoader动态加密、解密Class文件

在Java中如何利用ClassLoader动态加密、解密Class文件

文章目录 一、准备示例代码二、加密Class文件三、自定义ClassLoader四、使用自定义ClassLoader加载类五、进阶：使用更高安全性的AES加密算法六、注意事项 在Java开发中，保护代码的安全性是一个重要的课题。为了防止代码被轻易反编译，我们可以…
阅读更多...
EfficientFormer实战：使用EfficientFormerV2实现图像分类任务（一）

EfficientFormer实战：使用EfficientFormerV2实现图像分类任务（一）

摘要 EfficientFormerV2是一种通过重新思考ViT设计选择和引入细粒度联合搜索策略而开发出的新型移动视觉骨干网络。它结合了卷积和变换器的优势，通过一系列高效的设计改进和搜索方法，实现了在移动设备上既轻又快且保持高性能的目标。这一成果为在资源受…
阅读更多...
signalR和WebSocket的区别是什么

signalR和WebSocket的区别是什么

SignalR和WebSocket都是用于实现实时双向通信的技术，但它们在多个方面存在区别。以下是它们之间的主要区别： 1. 技术层次与协议支持 WebSocket： 是一种在单个TCP连接上进行全双工通信的协议。它是HTML5规范的一部分，提供了浏览器…
阅读更多...
Redis-01 入门和十大数据类型

Redis-01 入门和十大数据类型

Redis支持两种持久化方式：RDB持久化和AOF持久化。 1.RDB持久化是将Redis的数据以快照的形式保存在磁盘上，可以手动触发或通过配置文件设置定时触发。RDB保存的是Redis在某个时间点上的数据快照，可以通过恢复RDB文件来恢复数据。 2.AOF持久化…
阅读更多...
python3 -m ensurepip来安装pip@Ubuntu Jammy

python3 -m ensurepip来安装pip@Ubuntu Jammy

pip 是 Python 的包安装程序，它帮助我们安装和管理 Python 包。这些包可以是我们在 Python 项目中需要的库、框架、模块或应用程序。pip 使得安装、更新、卸载和列出已安装的包变得简单快捷。换句话说，如果没有pip，我们就没法安装和管理pytho…
阅读更多...
封装 WBXpopup 组件

封装 WBXpopup 组件

这是Popup组件基于微博小程序&#xff0c;需要改变标签&#xff0c;以及一写方法 支持四个方向抽屉&#xff0c;以及中间弹出功能 // 用法 <template><wbx-view style"height: 100vh;"><!-- 对话框组件 --><wbx-view><wbx-text click&quo…
阅读更多...
二进制日志gtid模式

二进制日志gtid模式

# --skip-gtids&#xff0c;使用mysqlbinlog截取时添加该参数&#xff0c;会执行已经执行的事务 mysqlbinlog --skip-gtids --include-gtidsa56fdfdc-7699-11ef-8f40-000c297f81d5:40 /data/binlog/mysql-bin.000003 > gtid.sql # --skip-gtids&#xff0c;使用mysqlbinlog截…
阅读更多...
力扣P1706全排列问题 很好的引入暴力 递归 回溯 dfs

力扣P1706全排列问题 很好的引入暴力 递归 回溯 dfs

代码思路是受一个洛谷题解里面大佬的启发。应该算是一个dfs和回溯的入门题目&#xff0c;很好的入门题目了下面我会先给我原题解思路我想可以很快了解这个思路。下面是我自己根据力扣大佬写的。 我会进行详细讲解并配上图辅助理解大家请往下看 #include<iostream> #inc…
阅读更多...
初始MYSQL数据库（7）—— 视图

初始MYSQL数据库（7）—— 视图

找往期文章包括但不限于本期文章中不懂的知识点&#xff1a; 个人主页&#xff1a;我要学编程(ಥ_ಥ)-CSDN博客 所属专栏&#xff1a; MYSQL 引言 前面我们学习MySQL数据库时&#xff0c;创建表之后&#xff0c;会在表中插入数据&#xff0c;在需要的时候&#xff0c;也会进行…
阅读更多...
uni-app 多环境配置

uni-app 多环境配置

前后端分离模式下&#xff0c;不同的环境如开发环境&#xff08;dev&#xff09;、测试环境&#xff08;test&#xff09;、生产环境&#xff08;prod&#xff09;等&#xff0c;不同环境后端数据库、api地址等可能都不同 。 uni-app中只有development和production两个环境 以配…
阅读更多...
python文字转wav音频

python文字转wav音频

借鉴博客 一.前期准备 1. pip install baidu-aip 2. pip install pydub 3. sudo apt-get install ffmpeg 二.代码 from aip import AipSpeech from pydub import AudioSegment import time#input your own APP_ID/API_KEY/SECRET_KEY APP_ID 14891501 API_KEY EIm2iXtvD…
阅读更多...
示例：WPF中Grid显示网格线的几种方式

示例：WPF中Grid显示网格线的几种方式

一、目的&#xff1a;介绍一下WPF中Grid显示网格线的几种方式 二、几种方式 1、重写OnRender绘制网格线&#xff08;推荐&#xff09; 效果如下&#xff1a; 实现方式如下&#xff1a; public class LineGrid : Grid{private readonly Pen _pen;public LineGrid(){_pen new P…
阅读更多...
try microceph (by quqi99)

try microceph (by quqi99)

作者&#xff1a;张华 发表于&#xff1a;2024-09-24 版权声明&#xff1a;可以任意转载&#xff0c;转载时请务必以超链接形式标明文章原始出处和作者信息及本版权声明(http://blog.csdn.net/quqi99) sudo snap install microceph --channelreef/stable sudo microceph clust…
阅读更多...
一分钟掌握 Java11 新特性

一分钟掌握 Java11 新特性

1. 局部变量类型推断&#xff08;var&#xff09; Java 11 允许使用 var 关键字来推断局部变量的类型。 在 Java 11 中&#xff0c; var 关键字允许开发者在声明局部变量时省略类型&#xff0c;编译器会根据赋值自动推断类型。这使得代码更加简洁&#xff0c;尤其在类型复杂的…
阅读更多...
【Linux】深度解析与实战应用：GCC/G++编译器入门指南

【Linux】深度解析与实战应用：GCC/G++编译器入门指南

&#x1f525; 个人主页&#xff1a;大耳朵土土垚 &#x1f525; 所属专栏&#xff1a;Linux系统编程 这里将会不定期更新有关Linux的内容&#xff0c;欢迎大家点赞&#xff0c;收藏&#xff0c;评论&#x1f973;&#x1f973;&#x1f389;&#x1f389;&#x1f389; 文章目…
阅读更多...
RabbitMQ08_保证消息可靠性

RabbitMQ08_保证消息可靠性

保证消息可靠性 一、生产者可靠性1、生产者重连机制&#xff08;防止网络波动&#xff09;2、生产者确认机制Publisher Return 确认机制Publisher Confirm 确认机制 二、MQ 可靠性1、数据持久化交换机、队列持久化消息持久化 2、Lazy Queue 惰性队列 三、消费者可靠性1、消费者…
阅读更多...
最新文章

Copyright @ 2022~2023