Vite 是一种前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：
- 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
- 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。
Vite 意在提供开箱即用的配置，同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性，并有完整的类型支持。
本期技术周刊一起了解下这个前端构建工具 Vite ，欢迎大家阅读 ～
文章推荐
以下是专栏板块关于 Vite 的相关文章
《【Vite 实践】Vite 库模式能满足你吗？或许你需要统一构建》作者：Samon
因为没有特别好的叫法，本人暂且把这叫做统一构建，本人把统一构建归纳为如下构建：
Bundle 构建
即 Vite（也是 Rollup）的库打包模式，单输入文件，单输出 bundle 文件，如果没有设置外部依赖（external）所有涉及的依赖包都会打包到一个 bundle 文件中。
优点：支持 umd 格式，浏览器中可作为外部依赖，不受业务代码 bundle 影响，可利用浏览器缓存机制，提高加载性能。
缺点：不支持 Tree Shaking 没有使用到的代码也会加载进来，由于打包到一个 bundle 文件，本地源码可读性差。
《【使用Vite构建工具快速创建Vue项目（Vue3.0项目开发）》作者：TANKING
本文将进行该项目的开发和发布。目前的Vue版本是3.0.4，通过Vite的打包，就可以部署到服务器进行发布。
组件化开发
vue项目的优点就是组件化开发，将每个功能、或者是每个页面、容器分成各个组件，一方面是便于维护，另一方面是多人开发的时候也是可以提高效率。可以增加代码的复用性、可维护性和可测试性。提高开发效率，方便重复使用，简化调试步骤，提升整个项目的可维护性，便于协同开发，是高内聚、低耦合代码的实践。
代码目录中的 components 目录就是组件的目录，在这里可以根据自己的项目去创建各个组件，直接在组件里面写html代码、以及调用vue的api去实现很多功能，例如axios网络请求，同时，组件内也可以写css样式。
《Vite 多页面应用配置&使用 vite-plugin-html 向 html 模板注入数据或标签》作者：老猫抽旱烟
在开发过程中，简单地导航或链接到 /nested/ - 将会按预期工作，与正常的静态文件服务器表现一致。
也就是说，如果你的文件夹有如下层级：
{
src: {
pages: {
demo1: {
App.vue
main.ts
},
demo2: {
App.vue
main.ts
},
demo1.html
demo2.html
}
}
}那么通过 vite 的开发服务器访问你的页面，需要访问localhost:3000/src/pages/demo1.html#/index 这样的链接，打包后index.html 也会出现在 dist/src/pages 文件夹下，很不方便。
《vite — 超快且方便的编译工具》作者：一颗冰淇淋
我们编写的代码，比如 ES6、 TypeScript、react 等是不能被浏览器直接识别的，需要通过 webpack 、rollup 这样的构建工具来对代码进行转换、编译。
但随着项目越来越大，需要处理的资源越来越多，构建工具也需要很长的时间才能开启服务，因此产生了新型的前端构建工具 Vite ，可以提升编译速度和减少构建配置。
《实现一个打包时将 CSS 注入到 JS 的 Vite 插件》作者：Name6
Vite 在2.0版本提供了Library Mode（库模式），让开发者可以使用Vite来构建自己的库以发布使用。正好我准备封装一个React组件并将其发布为npm包以供日后方便使用，同时之前也体验到了使用Vite带来的快速体验，于是便使用Vite进行开发。
《使用 vite 脚手架创建 vue3 项目配置 eslint+stylelint》作者：曹飞龙
使用vite的脚手架创建一个项目
yarn create vite安装Eslint包
cd vite-project yarn add yarn add eslint -D配置eslint
npx eslint --init
问题推荐
关于 Vite 的问题，欢迎正在阅读的小伙伴们一起来解决！
- 如何让 Vite 热更新,而不是直接刷新整个页面?
- Vite 的环境变量文件能否替换为 json 或 js？
- vite+vue3 如何配置可以让浏览器直接访问 public 下面的文件？
- 用 vite 打包 vue3 配置重载成功，但浏览器不能自动刷新？
- vite-plugin-imp 使用之后 console.log 行数错误?
- vite 使用函数生成 proxy 配置，dev 模式下正常，打包后却不生效？
- vite 打包，如何配置让所有浏览器使用兼容版的 chunk？
# SegmentFault 技术周刊 #
「技术周刊」是社区特别推出的技术内容系列，一周一主题。
每周二更新，欢迎「关注」。大家也可以在评论处留言自己感兴趣的主题，推荐主题相关的优秀文章。
如有问题可以添加小姐姐微信~
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。