接上篇，vilt是怎么在本机上开一个服务器的

安装和初始化项目：
当你创建一个新的 Vite 项目并运行 npm run dev 时，Vite 会执行一些初始化操作，包括：

• 加载项目的配置文件 vite.config.js（如果存在）。

• 解析项目的源代码。

• 设置开发服务器的参数（如端口号、代理等）。

启动本地 HTTP 服务器：

• Vite 在本地运行一个开发服务器，默认使用 ESBuild 作为构建工具来提供更高效的热更新和快速构建。这是一个内置的 HTTP 服务器，使用的是 Node.js 和 Koa.js（Vite 使用 Koa 作为 HTTP 服务器的框架）。

• 该服务器会启动并监听一个特定的端口（默认为 3000），你可以在浏览器中访问这个地址来查看你的应用。

你会看到类似这样的输出：

bash

复制编辑

Vite v2.x.x ready in 100ms ➜ Local: http://localhost:3000/ ➜ Network: http://192.168.1.100:3000/

这个地址就是 开发服务器的地址，你可以通过浏览器访问它来查看你的 Vue 项目。

动态加载页面和资源：

• Vite 会根据你的项目文件（如 index.html、Vue 组件等）来处理页面和资源的加载。

• 它会将项目文件（包括 JavaScript、CSS、Vue 组件等）转化为浏览器能够理解的格式。对于 Vue 3 项目，Vite 会使用 Vue 插件 来解析 .vue 文件，并将其转化为 JavaScript 代码。

ESBuild 和模块热更新（HMR）：

• Vite 使用 ESBuild 来进行超快速的构建，它会在开发模式下启动，并且在文件发生变化时，自动重新构建。

• Vite 支持 热模块替换（HMR），即在你修改代码时，Vite 只会重新加载受影响的模块，而不是整个页面。这样可以提高开发效率，不需要刷新整个页面。

• 当你修改 Vue 组件或其他源代码时，Vite 会通过 WebSocket 通知浏览器，只更新变更的部分，而不是重新加载整个页面。

配置和访问：
你可以在项目根目录下的 vite.config.js 文件中对开发服务器进行配置，主要包括以下内容：

• 端口号：配置开发服务器使用的端口号。

• 代理：配置请求代理，以解决跨域问题。

• 自定义静态资源路径：自定义开发服务器中静态文件的路径等。

示例 vite.config.js 配置：

js

复制编辑

import { defineConfig } from 'vite'; export default defineConfig({ server: { port: 8080, // 设置开发服务器的端口 open: true, // 启动时自动打开浏览器 proxy: { '/api': 'http://localhost:5000', // 配置代理，将所有 /api 请求转发到本地服务器 }, }, });

启动 Koa 服务：Vite 使用 koa 启动本地 HTTP 服务器，它会监听指定端口（通常是 3000）。

路由和请求处理：

• 静态资源：当你请求一个资源（比如 HTML、CSS 或 JS 文件）时，Koa 会通过 koa-static 中间件将这些静态资源返回给浏览器。

• 开发模式的构建：对于 JS 和 Vue 文件，Vite 会动态构建这些文件并返回给浏览器。Vite 在开发模式下通过 ESBuild 快速编译这些文件。

热更新（HMR）：

• Vite 内置了 WebSocket 支持，当文件发生变化时，Vite 会发送一个消息到浏览器，告知其刷新变更的模块。WebSocket 是一种在浏览器和服务器之间保持持久连接的协议，因此非常适合实时更新。

自定义配置：

• 在开发过程中，Vite 会读取 vite.config.js 文件，并根据文件中的配置来调整开发服务器的行为。例如，可以配置代理来处理跨域请求，或者修改端口号等。

启动开发服务器：Vite 使用 Node.js 和 Koa.js 启动一个本地 HTTP 服务器，监听指定端口（默认是 3000）。

编译和构建文件：Vite 使用 ESBuild 快速编译和构建前端资源，将它们转化为浏览器可用的格式。

实时更新：通过模块热替换（HMR），Vite 实现了快速的热更新体验，当你修改代码时，页面会局部更新，避免了整页刷新。

开发服务器的配置：你可以通过 vite.config.js 自定义开发服务器的行为，比如端口、代理等。