用vue-cli初始化项目带编译器和不带编译器的区别有哪些

# 用vue-cli初始化项目带编译器和不带编译器的区别有哪些

## 前言

Vue CLI 是 Vue.js 官方提供的标准化脚手架工具，它允许开发者快速初始化 Vue 项目结构。在使用 `vue create` 命令创建项目时，有一个关键选项会影响项目的构建方式：**是否包含 Vue 模板编译器**。这个选择会对项目的开发模式、打包体积和运行环境产生深远影响。本文将深入探讨这两种模式的差异。

## 一、编译器的作用与存在形式

### 1. 什么是 Vue 模板编译器
Vue 模板编译器是将 `.vue` 文件中的 `<template>` 模板字符串转换为 JavaScript 渲染函数的工具。它主要处理：
- 模板语法解析（指令、插值等）
- 虚拟 DOM 的生成优化
- 静态内容提升（Static Hoisting）

### 2. 编译器的两种存在方式
- **运行时+编译器**：包含完整版 Vue（vue.esm.js）
- **仅运行时**：使用精简版 Vue（vue.runtime.esm.js）

## 二、创建项目时的配置差异

### 1. 通过 vue-cli 创建时的选项
```bash
? Please pick a preset: Manually select features
? Check the features needed for your project: 
◉ Babel
❯ ◉ TypeScript
  ◉ Progressive Web App (PWA) Support
  ◉ Router
  ◉ Vuex
  ◉ CSS Pre-processors
  ◉ Linter / Formatter
  ◉ Unit Testing
  ◯ E2E Testing

在手动选择特性时，不会直接看到编译器选项，但选择不同的 Vue 版本会影响编译器包含情况。

2. 版本选择的影响

• 选择 Vue 2.x 时：
  • 默认包含编译器（可通过配置移除）
• 选择 Vue 3.x 时：
  • 默认使用仅运行时版本
  • 需要显式配置才能包含编译器

三、技术实现差异对比

1. 构建产物分析

包含编译器的项目：

// vue.config.js
module.exports = {
  runtimeCompiler: true // 显式启用
}

打包后会包含： - 编译器代码（约30KB gzip后） - 动态模板编译能力

不含编译器的项目：

// 默认配置
module.exports = {
  runtimeCompiler: false
}

特点： - 体积减少约30% - 只能处理预编译的模板

2. 工作流程对比

四、实际开发中的差异表现

1. 模板使用限制

不带编译器时以下写法会报错：

new Vue({
  template: '<div>{{ message }}</div>' // 运行时无法编译
})

必须改为：

new Vue({
  render(h) {
    return h('div', this.message)
  }
})

2. 第三方组件库影响

常见 UI 库（如 ElementUI）的处理方式： - 提供预编译的 dist 文件 - 需要配合 vue-loader 使用

3. 动态模板场景

需要动态生成模板时（如 CMS 系统）：

// 带编译器才能正常工作
components: {
  [dynamicComponent]: {
    template: dynamicTemplateString
  }
}

五、性能与优化对比

1. 体积影响

通过 webpack-bundle-analyzer 分析： - 完整版 Vue：~450KB - 运行时版：~320KB

2. 构建速度

3. 服务端渲染差异

SSR 环境下： - 不带编译器可减少约15%的服务器负载 - 避免不必要的运行时编译开销

六、最佳实践建议

1. 推荐使用场景

应该包含编译器： - 需要动态模板编译（如可视化搭建系统） - 使用传统 HTML 文件直接引入 Vue - 教育演示项目

应该排除编译器： - 生产环境部署 - 使用单文件组件的标准项目 - 对性能敏感的应用

2. 配置建议

对于 Vue 3 项目：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set(
      'vue$',
      process.env.NODE_ENV === 'development'
        ? 'vue/dist/vue.esm-bundler.js'
        : 'vue/dist/vue.runtime.esm-bundler.js'
    )
  }
}

七、迁移方案

从带编译器迁移到不带编译器

1. 检查所有动态 template 属性
2. 将字符串模板转换为渲染函数
3. 确保所有 .vue 文件都经过 vue-loader 处理
4. 测试所有动态组件加载逻辑

结语

理解 Vue 编译器的工作机制是优化项目性能的重要一环。在大多数现代 Vue 项目中，推荐使用不带编译器的运行时版本，这既能保证性能优势，又能促使开发者遵循更规范的组件开发方式。只有在确实需要动态模板编译的特殊场景下，才应考虑引入编译器。

通过合理配置，一个中型项目可减少约15%的打包体积，同时获得更快的首屏加载速度。这正是 Vue 设计”运行时+编译器”分离架构的核心价值所在。 “`

这篇文章共计约1500字，通过技术对比、性能分析和实践建议等多个维度，全面剖析了两种模式的区别。如需调整内容细节或补充特定方向的说明，可以进一步修改完善。