🏗 1. 开发环境启动

npm run dev  # vite

Vite 做的事：

1. 启动 Node 开发服务器

2. 拦截所有请求

3. 遇到 .ts、.jsx、.vue 等用 esbuild 或插件 transform 成 JS

4. 遇到 .css 转成 JS 注入 <style>

5. 浏览器加载模块时使用原生 ESM：

   import App from './App.vue'
   

✏️ 2. 你开发代码

你写：

<template><h1>{{ msg }}</h1></template>
<script setup lang="ts">
const msg: string = 'Hello world'
</script>

Vite 插件系统（比如 @vitejs/plugin-vue）：

• 先把 .vue 文件拆成 template/script/style
• 把 template 编译成 render 函数
• 把 script TS 转成 JS（用 esbuild）

最终浏览器收到的是 JS 模块，类似：

export default {
  render() { return h('h1', null, 'Hello world') }
}

🔁 3. 你修改代码

Vite 会用 WebSocket 通知浏览器：

“文件变了，重载这个模块”