vue独立构建和运行构建

有两种构建方式，独立构建和运行构建。它们的区别在于前者包含模板编译器而后者不包含。

模板编译器：模板编译器的职责是将模板字符串编译为纯 JavaScript 的渲染函数。如果你想要在组件中使用 template 选项，你就需要编译器。

模板字符串： template。Vue字符串模板 。el上提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。

独立构建： 独立构建包含模板编译器并支持 template 选项。 它也依赖于浏览器的接口的存在，所以你不能使用它来为服务器端渲染。

运行构建： 运行时构建不包含模板编译器，因此不支持 template 选项，只能用 render 选项，但即使使用运行时构建，在单文件组件中也依然可以写模板，因为单文件组件的模板会在构建时预编译为 render 函数。所以运行时构建比独立构建要轻量30%。

template：一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发 slot。

render：字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。render 函数接收一个 createElement 方法作为第一个参数用来创建 VNode。

---

Vue.js 的官方教程上是这么说的：

• 独立构建包括编译和支持 template 选项。 它也依赖于浏览器的接口的存在，所以你不能使用它来为服务器端渲染。
• 运行时构建不包括模板编译，不支持 template 选项。运行时构建，可以用 render 选项，但它只在单文件组件中起作用，因为单文件组件的模板是在构建时预编译到 render 函数中，运行时构建只有独立构建大小的 30%，只有 16Kb min+gzip 大小。

---

Vue.js 的运行过程实际上包含两步。

• 第一步，编译器将字符串模板（template）编译为渲染函数（render），称之为编译过程；(编译)
• 第二步，运行时实际调用编译的渲染函数，称之为运行过程。（调用）

---

Vue.js 为什么存在独立构建和运行构建这两种构建模式？

由于 Vue.js 1.0 的编译过程需要依赖浏览器的 DOM，所以无法（或者说没有意义）将编译器和运行时分开。因此在 Vue.js 1.0 分发包中，编译器和运行时是打包在一起，都在浏览器端执行。

然而到了 Vue.js 2.0，为了支持服务端渲染（server-side rendering），编译器不能依赖于 DOM，所以必须将编译器和运行时分开。

这就形成了独立构建（编译器 + 运行时）和运行时构建（仅运行时）。
显而易见，运行时构建要小于独立构建。

在现代前端工程构建中，通常会使用 vue-loader 和 vueify 预编译模板。在这种情况下，只需要打包运行时，而不需要打包编译器，运行时构建即可满足所需。

当然，如果你需要在前端使用 template 选项实时编译模板，那么还是需要使用独立构建将编译器发送到浏览器。

---

总结：

一、独立构建包含模板编译器，运行时构建不包含模板编译器。
二、模板编译器的作用就是将template选项编译成render函数，render函数是渲染的关键。
三、鉴于以上两点，使用运行时构建时，不能出现template选项，因为此时没有模板编译器。但是有一种情况除外：即webpack+vue-loader情况下单文件组件中出现template是可以的。
四、使用vue-cli生成项目时，会提醒使用哪种构建方式，npm包默认导出的是运行时构建，如果需要使用独立构建，需要在webpack中配置alias
五、目前暂时发现的两者的应用场景上的区别有

* 一、需要注意Vue实例化时的方式，运行时构建方式下实例化Vue时，不要出现template属性。
* 二、index.html中不要出现template或者是通过vue-router渲染的route-view 。
* 三、以上区别讨论的场景均为使用webpack+vue-loader单文件组件下，其他的区别暂时未发现。

反正就是两种不同的构建模式。可以适用与前后台而已。
前端构建前：独立构建可以在客户端执行，而运行时构建不支持template的编译器，所以不可以执行。
后端构建前：独立构建可以在不可以在客户端执行，因为有编译器，而运行时构建就可以执行。
构建后：构建后的文件都成为render渲染了，所以都可以执行。