Vue项目的构建

yannick_liu
139 阅读5分钟
前提

记录在公司开发过程中遇到模糊的知识点 ： 关于package.json 中 script的深入了解。

现有的script脚本 ：

 "scripts": {
    "dev": "vue-cli-service serve",
    "build:prod": "vue-cli-service build && gulp",
    "build:dev": "vue-cli-service build --mode development",
    "build:stage": "vue-cli-service build --mode staging",
    "preview": "node build/index.js --preview",
    "lint": "eslint --ext .js,.vue src",
    "test:unit": "jest --clearCache && vue-cli-service test:unit",
    "test:ci": "npm run lint && npm run test:unit",
    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
    "new": "plop",
    "gulp": "gulp",
    "deploy": "bash deploy.sh"
  },

执行npm run build:prod会发生什么？

会发生以下两个阶段的顺序执行：

vue-cli-service build 阶段。这是 Vue CLI 提供的构建命令，主要完成以下工作：

  • 代码编译
  • 优化资源
  • 生成输出

如果构建失败（如语法错误），&& 后的 gulp 将不会执行。

gulp 阶段。如果 Vue 构建成功，会继续执行 gulp 命令（需项目根目录有 gulpfile.js 配置文件）。Gulp 通常用于补充工作，例如：

  • 进一步处理构建结果：复制静态文件到 dist/。生成 Service Worker。
  • 自定义优化：压缩图片，部署前预处理。
  • 启动本地服务器（如果配置了 gulp serve）

如果没有 gulpfile.js，命令会报错 Error: No gulpfile found。

注意事项
  • 确保项目中已安装 @vue/cli-service 和 gulp（devDependencies）。
  • vue-cli-service build 默认使用生产环境模式（NODE_ENV=production）。
  • 若想即使 Vue 构建失败也执行 Gulp，可改用 vue-cli-service build ; gulp（用 ; 替代 &&）。

"vue-cli-service build --mode development", 这句指令是什么意思？

指令含义

vue-cli-service build

Vue CLI 默认的构建命令，通常用于生产环境（会压缩代码、优化资源等）。

--mode development

强制指定构建模式为 development，覆盖默认的 production 模式。

执行过程

读取环境变量

  • 加载项目根目录下 .env.development 文件中的环境变量（如果存在）。

开发模式构建：

  • 代码仍会打包（输出到 dist/ 目录），但会保留开发调试特性

生成输出：

  • 结果与 build 类似，但文件未压缩且包含调试信息。

scripts字段中定义的常用的指令

serve 和 dev
"scripts": {
  "serve": "vue-cli-service serve",
  "dev": "vue-cli-service serve"
}

执行过程：

  • 运行 vue-cli-service serve，基于 webpack-dev-server 启动一个本地开发服务器（默认端口 8080）。
  • 编译 Vue 组件、JavaScript 和 CSS，并在内存中生成临时文件（不写入磁盘）。
  • 修改代码后自动重新编译并刷新浏览器。
  • 读取vue.config.js 中的 devServer 配置（如代理 API 请求）。

典型用途：

  • 开发时快速调试，实时预览代码变更。
build
"scripts": {
  "build": "vue-cli-service build"
}

执行过程：

  • 生产环境构建。设置 NODE_ENV=production，启用代码压缩和优化。
  • 资源编译与打包
  • 生成输出。默认输出到 dist/ 目录

典型用途：

  • 部署前生成优化后的生产环境代码。
lint
"scripts": {
  "lint": "vue-cli-service lint"
}

执行过程：

  • 代码检查，运行 ESLint
  • 自动修复。若配置了 --fix 参数（ "vue-cli-service lint --fix"`），会自动修复部分格式问题（如缩进、引号）。

典型用途：

  • 统一代码风格，避免语法错误。
test:unit / test:e2e
"scripts": {
  "test:unit": "vue-cli-service test:unit",
  "test:e2e": "vue-cli-service test:e2e"
}

执行过程：

  • test:unit：使用 Jest 或 Mocha 运行单元测试（测试组件/函数逻辑）。
  • test:e2e使用 Cypress 或 Nightwatch 运行端到端测试（模拟用户操作）。

典型用途：

  • 保证代码质量，验证功能正确性。
preview
"scripts": {
  "preview": "vue-cli-service preview"
}

执行过程：

  • 先执行build生成dist/，然后启动一个静态服务器预览构建结果。
  • 检查生产环境的资源加载、路由等是否正常。

典型用途：

  • 部署前确认 dist/ 内容是否符合预期。
自定义组合指令
"scripts": {
  "deploy": "npm run build && firebase deploy",
  "start": "npm run serve"
}

执行过程：

  • deploy： 先构建生产代码，再触发部署（如上传到 Firebase Hosting）。
  • start： 别名指令，通常映射到 serve。
关键点总结
  • 所有 vue-cli-service 指令依赖 @vue/cli-service，它封装了 webpack、Babel、ESLint 等工具。
  • serve使用开发模式（NODE_ENV=development），build 使用生产模式。
  • 可通过 vue.config.js 修改默认行为（如输出路径、端口号）。

vue-cli-service

安装来源
  • 由 @vue/cli-service 包提供，安装 Vue CLI 时自动集成到项目中（位于 node_modules/.bin/vue-cli-service）。
  • 是 Vue CLI 的核心服务层，充当配置管理和任务调度的中间件。
核心功能
  • 读取项目配置（vue.config.js、环境变量等）。
  • 动态生成 Webpack 配置，并启动对应的构建流程。
  • 提供标准化命令（如 serve、build、lint）。
指令结构

基本语法：

vue-cli-service <command> [options]
  • <command>：子命令（如 serve、build）。
  • [options]：可选参数（如 --mode、--dest）。
底层执行流程详解

以 vue-cli-service build 为例：

初始化阶段

  • 根据 --mode 参数读取对应的 .env 文件
  • 注入 process.env，例如 NODE_ENV=production。
  • 读取 vue.config.js 中的自定义配置。
  • 合并 Vue CLI 的默认 Webpack 配置（可通过 vue inspect 查看）。

Webpack 配置生成

  • 自动识别 src/main.js 作为默认入口。

  • 收集所有依赖的 Vue 组件、JS、CSS 文件。

  • Babel 转译：通过 babel-loader 处理 ES6+ 语法。

  • 组件编译：vue-loader 解析 .vue 文件，分离模板/脚本/样式。

  • 样式处理：支持 Sass/Less/PostCSS，提取为独立 CSS 文件。

插件注入

  • HtmlWebpackPlugin：生成 index.html 并注入资源引用。
  • MiniCssExtractPlugin：提取 CSS 到独立文件。
  • TerserPlugin（生产模式）：压缩 JS 代码。

构建执行

  • Webpack 根据配置进行依赖分析、模块打包。
  • 输出文件到 dist/ 目录（默认路径）。
  • 生产模式：启用 Tree-shaking、代码分割（SplitChunks）。
  • 开发模式：保留 Source Map，跳过压缩。

收尾工作

  • 显示构建耗时、文件体积（可通过 --report 生成分析报告）。
  • 错误或警告信息提示（如 ESLint 校验失败）。
关键配置与扩展

环境变量控制

  • 模式（Mode）：通过--mode 指定（如 development、production）。决定加载哪个 .env 文件和 NODE_ENV 值。

  • 自定义变量 ：在 .env 文件中定义以 VUE_APP_ 开头的变量：

    VUE_APP_API_URL=https://api.example.com

修改默认行为

在 vue.config.js 中覆盖配置：

module.exports = {
  publicPath: '/assets/',      // 修改资源路径
  outputDir: 'build',          // 更改输出目录
  chainWebpack: (config) => {  // 直接操作 Webpack 配置
    config.plugin('html').tap(args => {
      args[0].title = 'My App';
      return args;
    });
  }
};

插件系统

通过 vue add 安装的插件（如 @vue/cli-plugin-router）会动态修改 vue-cli-service 的行为。

  • 示例：添加 router 后，会自动生成路由配置并更新 Webpack 别名。
avatar
文章
阅读
粉丝