一、vite创建一个Vue项目

一、vite创建一个Vue项目

yarn:

yarn create vite my-vue-app --template vue

Npm:

// npm 6.x
npm create vite@latest my-vue-app --template vue
// npm 7.x
npm create vite@latest my-vue-app -- --template vue

二、index.html 与项目根目录

在一个 Vite 项目中，index.html 在项目最外层而不是在 public 文件夹内。这是有意而为之的：在开发期间 Vite 是一个服务器，而 index.html 是该 Vite 项目的入口文件。

Vite 将 index.html 视为源码和模块图的一部分。Vite 解析 <script type="module" src="..."> ，这个标签指向你的 JavaScript 源码。甚至内联引入 JavaScript 的 <script type="module"> 和引用 CSS 的 <link href> 也能利用 Vite 特有的功能被解析。另外，index.html 中的 URL 将被自动转换，因此不再需要 %PUBLIC_URL% 占位符了。

三、vite的功能

Vite 还通过原生 ESM 导入提供了许多主要用于打包场景的增强功能。

Vite 在启动之前会创建一个为热更新服务定制的 websocket 服务器，然后对项目文件进行监听。同时客户端的 html 里注入了 @vite/client 来与服务端进行配合实现热更新。

Vite 在创建 WebSocketServer 时，主要进行了一些错误的捕获处理和对 payload 的格式处理，最终返回封装好的 send 和 close 方法，用于后续服务端推送消息和关闭服务。

vite的热更新流程：

1.生成并推送变更文件信息:两个核心操作，一个是更新 moduleGraph，使修改文件的缓存失效 ,一个是执行热更新方法 handleHMRUpdate。

2.客户端解析热更新信息，发送请求获取最新模块并渲染。

Vite 的整个热更新并不涉及任何打包的操作，而是直接去请求获取了需要更新的模块的的内容，并完成模块的替换。这便是 Vite 项目中无论应用程序大小如何，都能够始终保持极快的模块热重载的秘诀，真正的实现了按需加载。