启动 vite 开发服务器需要在项目根目录执行 npx vite 或 npm run dev 命令，该操作会默认在本地 3000 端口启动一个基于 node.js 的 http 服务，并自动处理模块热更新（hmr）。
Vite 启动时如何解析入口文件
当 Vite 启动后，它会读取项目中的 index.html 作为入口点，并通过其中的 <script type="module" src="/src/main.js"></script> 标签定位到具体的 JavaScript 源文件。Vite 不会像传统打包工具那样将所有代码打包成一个 bundle，而是直接在浏览器请求时按需编译 ES Module。
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')上述代码是典型的 Vue 3 + Vite 入口文件结构。当你在终端运行 npx vite 后，访问 http://localhost:3000，浏览器会请求 /src/main.js。Vite 服务端拦截该请求，识别出 import App from './App.vue'，然后进一步将 .vue 文件转换为 JS 模块返回给浏览器。整个过程无需预先构建，实现了极速冷启动。
立即学习“Java免费学习笔记（深入）”；
Vite 如何处理静态资源与别名
在开发环境中，Vite 对静态资源的处理遵循文件系统直接映射原则，而对路径别名（Alias）则通过内部插件进行重写。这意味着引用 /assets/logo.png 这样的绝对路径会直接指向项目根目录下的对应文件，而使用 @/components/Header.vue 则需要配置 vite.config.js 中的 resolve.alias 选项。
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
}
},
server: {
port: 5173,
open: true
}
})这段配置展示了如何自定义 Vite 的行为。通过设置 server.port 可以改变默认启动端口，避免与本地其他服务冲突。open: true 会在服务器启动成功后自动打开浏览器窗口。当你在代码中使用 import Header from '@/components/Header.vue' 时，Vite 的内部解析器会将 @ 替换为 src 路径，从而正确加载组件。这种机制保证了开发体验的一致性和高效性。
修改配置文件后服务器如何响应
当你修改了 vite.config.js 或 package.json 中的依赖项时，Vite 开发服务器会自动重启以应用新的配置。这种全量重启不同于模块级别的热更新，因为它涉及到底层插件链和解析规则的变化。如果配置错误，服务器将无法启动并在终端输出具体的错误堆栈信息。
