【转】[Vue] 项目启动介绍

转自：kimi.ai

在 Vue CLI 项目中，vue-cli-service 是一个封装了 Webpack 的命令行工具，用于执行各种项目相关的任务。
serve、build 和 lint 是 vue-cli-service 提供的常用命令，它们分别用于不同的开发和生产场景。以下是它们的区别和用途：

1. vue-cli-service serve

• 用途：用于开发阶段启动开发服务器。
• 功能：
  • 启动一个本地开发服务器（通常是 localhost:8080）。
  • 提供热重载（Hot Module Replacement, HMR）功能，当代码发生变化时，页面会自动刷新。
  • 支持代理（proxy）配置，用于解决开发阶段的跨域问题。
  • 生成的文件是未压缩的，适合开发调试。
• 运行环境：
  • 默认运行在 development 环境。
• 示例命令：
  bash复制

  npm run serve
  # 或者
  vue-cli-service serve

2. vue-cli-service build

• 用途：用于生产阶段构建项目。
• 功能：
  • 将项目打包为生产环境的静态文件，通常输出到 dist 文件夹。
  • 对代码进行压缩（包括 JavaScript、CSS 和 HTML）。
  • 提取公共代码（Common Chunks）以优化加载性能。
  • 生成的文件是压缩后的，适合部署到生产环境。
• 运行环境：
  • 默认运行在 production 环境。
• 示例命令：
  bash复制

  npm run build
  # 或者
  vue-cli-service build

3. vue-cli-service lint

• 用途：用于检查代码的格式和规范。
• 功能：
  • 根据项目中配置的 ESLint 规则检查代码。
  • 可以自动修复部分不符合规范的代码。
  • 帮助开发者保持代码风格的一致性，减少潜在的错误。
• 运行环境：
  • 可以在任何环境下运行，通常在开发阶段使用。
• 示例命令：
  bash复制

  npm run lint
  # 或者
  vue-cli-service lint

总结

• vue-cli-service serve：用于开发阶段，启动本地开发服务器，支持热重载。
• vue-cli-service build：用于生产阶段，构建项目并生成压缩后的静态文件。
• vue-cli-service lint：用于检查代码规范，确保代码风格一致，减少错误。

---

可以通过修改 package.json 文件中的 scripts 部分来添加更多的自定义启动脚本。这些脚本可以用于执行各种任务，例如运行测试、构建特定环境的项目、启动特定的工具等。

以下是一些常见的自定义脚本示例：

---

1. 添加自定义环境的构建脚本

默认情况下，Vue CLI 提供了 development 和 production 环境。你可以通过添加自定义环境来扩展构建脚本。

示例：添加 staging 环境

1. 创建环境变量文件 在项目根目录下创建 .env.staging 文件，用于定义 staging 环境的变量：
   复制

   VUE_APP_API_URL=https://api.staging.example.com
   NODE_ENV=production

2. 添加自定义构建脚本 修改 package.json 文件，添加 build:staging 脚本：
   JSON复制

   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "build:staging": "vue-cli-service build --mode staging"
   }

3. 运行脚本 使用以下命令构建 staging 环境的项目：
   bash复制

   npm run build:staging

---

2. 添加测试脚本

如果你使用了 Jest 或其他测试框架，可以通过添加测试脚本来运行测试。

示例：添加 Jest 测试脚本

1. 安装 Jest 如果尚未安装 Jest，可以运行以下命令安装：
   bash复制

   npm install --save-dev jest

2. 添加测试脚本 修改 package.json 文件，添加 test 脚本：
   JSON复制

   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "test": "jest"
   }

3. 运行测试 使用以下命令运行测试：
   bash复制

   npm run test

---

3. 添加自定义开发任务

你可以添加自定义任务来执行特定的开发任务，例如启动一个本地的 Mock 服务器。

示例：添加 Mock 服务器脚本

1. 安装 Mock 服务器工具 例如，使用 json-server 作为 Mock 服务器：
   bash复制

   npm install --save-dev json-server

2. 添加 Mock 服务器脚本 修改 package.json 文件，添加 mock 脚本：
   JSON复制

   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "mock": "json-server --watch mock/db.json --port 3000"
   }

3. 运行 Mock 服务器 使用以下命令启动 Mock 服务器：
   bash复制

   npm run mock

---

4. 添加并行任务

如果你需要同时运行多个任务（例如同时启动开发服务器和 Mock 服务器），可以使用 concurrently 包。

示例：并行运行开发服务器和 Mock 服务器

1. 安装 concurrently
   bash复制

   npm install --save-dev concurrently

2. 添加并行任务脚本 修改 package.json 文件，添加 start 脚本：
   JSON复制

   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "mock": "json-server --watch mock/db.json --port 3000",
     "start": "concurrently \"npm run serve\" \"npm run mock\""
   }

3. 运行并行任务 使用以下命令同时启动开发服务器和 Mock 服务器：
   bash复制

   npm run start

---

5. 添加自定义构建任务

你可以添加自定义构建任务，例如构建特定的文件或目录。

示例：构建特定的文件

1. 添加自定义构建脚本 修改 package.json 文件，添加 build:specific 脚本：
   JSON复制

   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "build:specific": "vue-cli-service build --no-cache --dest dist/specific"
   }

2. 运行自定义构建 使用以下命令构建特定的文件：
   bash复制

   npm run build:specific

---

总结

通过修改 package.json 文件中的 scripts 部分，你可以添加任意数量的自定义脚本，以满足项目的各种需求。这些脚本可以用于开发、测试、构建、部署等不同阶段，帮助你更高效地管理项目。