对不同构建版本的解释

Vue官网解释 (opens new window)

术语

• 完整版
  同时包含编译器和运行时版本

• 编译器
  用来将模板字符串编译为 JavaScript 渲染函数的代码

• 运行时
  用来创建 Vue 实例，渲染并处理虚拟 DOM 的代码。基本上是出去编译器的其他一切。

• UMD
  UMD 版本可以通过 <script> 标签直接用在浏览器中。
  jsDelivr CDN 的 https://cdn.jsdelivr.net/npm/vue@2.6.14 默认文件就是运行时 + 编译器的 UMD 版本 (vue.js)

• CommonJs
  CommonJs 用来配合老的打包工具，如 Browserify 或 webpack 1。
  这些打包工具的默认文件（pkg.main）是只包含运行时的 CommonJs 版本 (vue.runtime.common.js)。

• ES Module
  从 2.6 开始 Vue 会提供两个 ES Module （ESM） 构建文件。

  1. 为打包工具如 webpack 2 或 Rollup 提供的现代打包工具
  2. 为浏览器提供的 ESM ，用于在现代浏览器中通过 <script type="module"> 直接导入。

运行时 + 编译器 VS 只包含运行时

• 如果需要在客户端编译模板（比如传入一个字符串给 template 选项，或挂载到一个元素上并以其DOM内部的html作为模板），
  则需要加上编译器。

// 需要编译器
new Vue({
  template: '<div>{{ hi }}</div>'
})

// 不需要编译器
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

• 当使用 vue-loader 或 vueify 时，*.vue 文件内部的模板会在构建时预编译成 JavaScript，
  最终打好的包里是不需要编译器的，所以只用运行时版本即可。