Vue 项目中运行 `npm run dev` 时发生的过程

时间：2025-05-05 07:01:39

步骤1：找到「任务说明书」(package.json)

当你输入 npm run dev，系统首先会去查项目的 「任务说明书」（即 package.json 文件），看看 dev 这个任务具体要做什么。

示例代码（package.json 片段）：
{
  "scripts": {
    "dev": "vue-cli-service serve"
  }
}

解释：
这里的 "dev": "vue-cli-service serve" 就像说明书上写着：“当执行 dev 任务时，请启动 Vue 的开发服务器”。

步骤2：启动「代码加工厂」（开发服务器）

系统会运行 vue-cli-service serve，启动一个本地开发服务器。这个服务器相当于一个「实时加工厂」，负责两件事：

  1. 编译代码：把你的 Vue 代码（如 .vue 文件）加工成浏览器能看懂的 HTML/CSS/JS。
  2. 实时监听：当你修改代码时，自动重新加工并刷新页面。
比喻：

就像你写作业（写代码），旁边有一个「智能助手」（开发服务器），你一写完他就帮你检查错误、翻译成老师能看懂的语言（浏览器能运行的代码），并且你一改作业，他立刻更新。

步骤3：「加工厂」流水线操作

开发服务器内部会按顺序做以下事情：

  1. 读取配置：检查 vue.config.js（如果有），确认加工规则（比如用什么工具编译 CSS）。
  2. 处理依赖：把 import 的组件、第三方库（如 vue-router）全部打包到一起。
  3. 编译代码：
    • 将 .vue 文件拆解成 HTML/JS/CSS。
    • 用 Babel 把 ES6+ 代码转成旧版浏览器能运行的 JS。
    • 处理 Sass/Less 等 CSS 预处理器。
  4. 启动服务器：默认在 http://localhost:8080 运行，自动打开浏览器。
示例终端输出：
 DONE  Compiled successfully in 2156ms

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.1.5:8080/

步骤4：开启「热更新」模式

当你修改代码并保存时，开发服务器会：

  1. 局部更新：只重新编译修改的文件（而不是整个项目）。
  2. 无刷新替换：通过「热模块替换（HMR）」，在不刷新页面的情况下，替换修改的代码部分。
比喻：

就像修车时，只更换坏掉的零件（修改的代码），而不是把整辆车拆了重装。

完整示例流程

1. 项目结构：
my-vue-project/
  ├── src/
  │   ├── App.vue
  │   └── main.js
  ├── package.json
  └── vue.config.js
2. 运行命令：
cd my-vue-project
npm install   # 先安装依赖（如果还没装）
npm run dev  # 启动开发服务器
3. 结果：
  • 浏览器自动打开 http://localhost:8080，显示你的 Vue 应用。
  • 修改 App.vue 中的文字并保存 → 页面自动更新，无需手动刷新。

常见问题处理

问题1：端口被占用？

解决方法：修改启动端口

// package.json
"scripts": {
  "dev": "vue-cli-service serve --port 3000"
}
问题2：编译报错？

示例：如果你在代码中写了语法错误（比如漏了逗号）：

ERROR  Failed to compile with 1 error

Module Error: Missing comma in object literal.

解决方法：根据提示修正代码，保存后会自动重新编译。

总结

  • npm run dev = 启动「代码加工厂」+ 实时监控修改。
  • 核心功能：编译代码、本地服务器、热更新。
  • 开发体验：写代码 → 保存 → 立即看效果，高效无痛！ ????

相关文章