核心包概述

相关源文件

• CHANGELOG.md
• dist/vue.common.js
• dist/vue.runtime.common.js
• package.json
• packages/compiler-sfc/package.json
• packages/server-renderer/package.json
• packages/template-compiler/package.json
• src/platforms/web/entry-compiler.ts

本文详细概述了构成 Vue.js 2.7 生态系统的主要包。它涵盖了每个包的用途、它们之间的关系以及各种可用的分发格式。有关 Vue 2.7 与 Vue 3 的关系和回溯功能的信息，请参阅Vue.js 2.7 vs Vue 3。

包结构概览

Vue.js 2.7 分布在多个包中，每个包在生态系统中都有其特定用途。主要包有：

1. Vue 核心 - 包含 Vue 运行时和可选编译器的主要包
2. Compiler SFC - 用于编译单文件组件（.vue 文件）
3. Server Renderer - 用于服务器端渲染 (SSR) 支持
4. Template Compiler - 用于构建工具中的模板编译

包关系图

来源：package.json1-136 packages/compiler-sfc/package.json1-38 packages/server-renderer/package.json1-45 packages/template-compiler/package.json1-36

Vue 核心包

Vue 核心包是使用 Vue.js 的主要入口点。它以 vue 的名称发布在 npm 上，并为各种用例提供了不同的构建版本。

分发格式

Vue.js 2.7 以多种格式分发，以适应不同的环境和用例：

来源：package.json1-136 dist/vue.common.js1-6 dist/vue.runtime.common.js1-6

构建类型

Vue.js 提供了两种类型的构建版本：

构建类型	描述	用例
完整构建	包含模板编译器	用于没有构建步骤的开发，或当模板定义在 HTML 中时
仅运行时构建	不包含模板编译器	在使用构建工具并预编译模板时

来源：package.json6-10

模块格式

Vue 提供以下模块格式：

格式	入口点	描述
UMD	dist/vue.js	用于浏览器中通过 <script> 标签直接使用
CommonJS	dist/vue.runtime.common.js	用于 Browserify 或 Webpack 1 等旧打包工具
ES 模块	dist/vue.runtime.esm.js	用于 Webpack 2+ 或 Rollup 等现代打包工具
ES 模块 (Node)	dist/vue.runtime.mjs	专为 Node.js 优化的 ES 模块构建

来源：package.json6-10 package.json19-39

@vue/compiler-sfc

@vue/compiler-sfc 包负责编译 Vue 单文件组件（.vue 文件）。它是 Vue 的核心依赖项，并被 Vue CLI 和 Vite 等构建工具使用。

特性

• 将 .vue 文件解析为其组成部分（模板、脚本、样式）
• 处理 <script setup> 语法（Vue 2.7 新增）
• 处理 CSS 作用域和 CSS v-bind 特性
• 转换模板和样式中的资源 URL

来源：packages/compiler-sfc/package.json1-38 src/platforms/web/entry-compiler.ts1-5

vue-server-renderer

vue-server-renderer 包支持 Vue 应用程序的服务器端渲染。它在服务器上将 Vue 组件渲染为 HTML，这可以提高 SEO 和初始页面加载性能。

特性

• 将 Vue 应用程序渲染为 HTML 字符串或流
• 支持客户端激活以接管交互元素
• 与 Node.js HTTP 服务器集成
• 提供 Bundle Renderer 以渲染 webpack 打包的 Vue 应用程序

来源：packages/server-renderer/package.json1-45

vue-template-compiler

vue-template-compiler 包被构建工具用于将 Vue 模板预编译为渲染函数。这使得可以使用仅运行时构建，从而更小、更高效。

特性

• 将 Vue 模板编译为渲染函数
• 提供 Vue 单文件组件的解析工具
• 被 Vue CLI、webpack（通过 vue-loader）等构建工具使用
• 必须与核心 Vue 包版本一致

来源：packages/template-compiler/package.json1-36

包版本对齐

所有 Vue 包必须使用匹配的版本以确保兼容性。例如，如果您使用 Vue 2.7.16，所有相关包也应为 2.7.16 版本。

重要依赖项

Vue 生态系统有几个开发者应该注意的关键依赖项：

包	描述	所需包
@babel/parser	用于 SFC 编译的 JavaScript 解析器	@vue/compiler-sfc
postcss	用于处理 SFC 中样式的 CSS 处理器	@vue/compiler-sfc
de-indent	用于处理模板缩进的辅助工具	vue-template-compiler
he	HTML 实体编码器/解码器	vue-template-compiler
source-map	Source Map 生成工具	compiler-sfc, server-renderer

来源：packages/compiler-sfc/package.json10-14 packages/template-compiler/package.json28-31 packages/server-renderer/package.json26-35

Vue 2.7 特殊功能

Vue 2.7 是一个特殊版本，它回溯了 Vue 3 中的多项功能，包括：

• 组合式 API（ref()、reactive() 等）
• 单文件组件中的 <script setup> 语法
• SFC 样式块中的 CSS v-bind
• 改进的 TypeScript 支持

这些功能的实现方式保持了与 Vue 2.x 应用程序的向后兼容性，同时提供了迁移到 Vue 3 的路径。

来源：CHANGELOG.md1-379

构建系统和分发

Vue 使用复杂的构建系统来生成各种分发格式。

来源：package.json41-62

构建过程由 Vue 仓库中的构建脚本控制，这些脚本使用 Rollup 进行打包，并使用 Terser 对生产构建进行代码压缩。