当在一个vite构建的vue项目目录下运行npm run dev后，都发生了什么

当在一个使用 Vite 的项目中执行 npm run dev 时，Vite 会启动开发模式的相关流程，快速为你提供一个可用于开发的本地服务器。流程如下:

1. 查找 `package.json` 中的 `dev` 脚本

在执行 npm run dev 时，首先，Vite 会在当前根目录查找 package.json 文件中的 dev 脚本。如果 dev 脚本被定义为 vite，Vite 会启动开发服务器。

package.json是npm和Node.js生态系统中的核心配置文件，定义了一个项目的基本信息、依赖关系和脚本命令等内容。
当运行 npm run <script> 时，npm会自动：

查找最近的package.json文件（从当前目录向上递归查找）。

检查 scripts 字段，寻找与 <script> 匹配的命令并执行 npx <script> 。

假设 package.json 如下：

{
  "name": "vite-project",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "vite": "^4.0.0"
  }
}

当执行 npm run dev 时，Vite 就会启动开发模式。

2. 执行 `vite` 命令启动开发服务器

Vite 的 dev 脚本运行时会触发以下行为：

启动开发服务器：Vite 会启动一个本地开发服务器，通常运行在 http://localhost:3000（如果端口没有被占用的话）。你可以在浏览器中访问此地址来查看你的应用。
模块解析和处理：Vite 会解析项目中的模块，并根据配置（如 vite.config.js）进行适当的处理。例如，Vite 会处理 JavaScript、CSS、Vue、TypeScript 等文件，并支持热更新（HMR）。

3. 启动 Vite 开发服务器

Vite 开发服务器的启动包括以下几个关键步骤：

启动本地服务器：Vite 使用 rollup 启动一个开发服务器，并提供快速的 HMR（热模块替换）支持。
监听文件变化：Vite 会监听项目目录中的文件变动（例如 .js、.vue、.ts 等），并在文件发生变化时，只重新编译相关模块，避免重新加载整个页面。
模块优化：Vite 会对依赖模块进行优化，通常会预编译一些常用的模块（例如 React、Vue、lodash 等），以提高开发过程中的性能。

4. Vite 配置文件 (`vite.config.js`)

Vite 允许你在 vite.config.js 文件中进行配置，控制开发服务器的行为。例如，设置端口、指定代理规则、优化依赖等。

以下是一个简单的 vite.config.js 文件实例：

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    port: 3000,  // 设置开发服务器端口
    open: true   // 启动时自动打开浏览器
  },
  plugins: [
    // 你可以在这里添加 Vite 插件，例如 Vue 插件
  ]
});

在这个配置文件中：

server.port：设置开发服务器运行的端口号。
server.open：设置为 true 时，Vite 会在服务器启动时自动打开浏览器。
对于所谓 vite 插件的含义，详见 Vite的插件代表着什么

5. 监听文件变化并热更新

Vite 的开发服务器会通过 WebSocket 连接与浏览器进行通信。当你修改文件（如 .js、.vue、.css 等）时，Vite 会：

编译修改后的文件。
向浏览器发送更新信息，更新相关模块，而无需刷新整个页面。
对于 Vue 或 React 等框架，Vite 会智能地重新加载只发生变化的组件，而不会重新加载整个页面。

例如，当你修改一个 Vue 组件时（如 App.vue），Vite 会仅重新渲染该组件，而不会刷新整个页面。

6. 输出开发日志和错误信息

在开发过程中，Vite 会输出大量的日志信息，显示在终端中，帮助开发者了解当前的编译状态和错误信息。例如：

> vite

  VITE v4.0.0 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose
  > press h to show help

  vite v4.0.0 server started at http://localhost:3000/
  50 modules transformed

如果代码有错误，Vite 会在浏览器中显示详细的错误提示，并高亮错误的位置。例如，如果 Vue 组件中的模板语法有问题，Vite 会将错误信息渲染到浏览器，帮助你快速定位问题。

7. 处理 CSS 和静态资源

Vite 会处理项目中的 CSS 文件、静态资源和图片等。例如，Vite 会支持使用 postcss、SASS 等工具处理样式表，还支持从 assets 目录加载静态资源。

CSS 预处理器（如 SASS、LESS）的支持。
图片等静态资源的处理，例如，Vite 会自动优化和加载图像文件。

8. 热模块替换（HMR）

Vite 的热模块替换是其最大的特点之一，它极大地提升了开发体验。每当你修改代码时，Vite 会尽可能地只更新改变的模块，而不是刷新整个页面。

例如，在 Vue 组件中修改一个数据属性或模板时，Vite 会只重新加载那个组件，而不会刷新整个页面，这意味着你的应用状态不会丢失。

9. 打包生产版本（`vite build`）

虽然 npm run dev 启动的是开发模式，但你也可以使用 npm run build 打包应用的生产版本。Vite 会在此过程中进行代码优化，减少不必要的包体积，并进行如代码拆分、压缩等操作。

例子：完整的开发流程

假设你有一个 Vue 项目，文件结构如下：

vite-project/
  ├── index.html
  ├── src/
  │   ├── main.js
  │   └── App.vue
  ├── vite.config.js
  ├── package.json
  └── node_modules/

index.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

src/main.js：

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

src/App.vue：

<template>
  <div>
    <h1>Hello, Vite!</h1>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

vite.config.js：

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    port: 3000,
    open: true,
  },
});

package.json：

{
  "name": "vite-project",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "vite": "^4.0.0"
  }
}

执行 npm run dev 后，Vite 会：

启动本地服务器，访问 http://localhost:3000。
监听源代码文件变化并支持热更新。
打包并提供优化后的代码，支持 Vue 单文件组件（SFC）处理。

总结

当你执行 npm run dev 在 Vite 项目中时，Vite 会：

读取 package.json 中的 dev 脚本，执行 vite 命令。
启动开发服务器并提供快速的模块处理和热更新。
在本地开发环境中，监听文件变化，实时更新浏览器。
输出开发日志信息并提供详细的错误信息帮助调试。

Vite 的核心优势是其极快的启动速度和模块热更新功能，适合现代 Web 开发。