Vue 的仅运行时构建究竟是什么，它与编译器构建有何不同？

Question

我收到此警告：

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

下面是我的基本样板代码。我知道它阻止我Foo像这样创建我的组件，但这究竟意味着什么，它与另一种实例化 Vue 实例的方式有什么不同？

const Foo = {
  template: `<div>xxx</div>`
}
const routes = [
  { path: '/foo', component: Foo },
  { path: '/', component: App}
]
    
const router = new VueRouter({
  routes:routes
})
Vue.config.productionTip = false
    
new Vue({
  router
}).$mount('#app')

Answer 1

完整构建（即“包含编译器”）

也称为“完整”构建，“包含编译器”包括编译器和运行时。编译器允许使用如下template字符串：

template: `<div>xxx</div>`

CDN：当通过 CDN 使用 Vue 时，例如<script src="https://unpkg.com/vue"></script>，通常是完整构建（除非您另有说明）。

仅运行时

模板字符串的替代方法是渲染函数。如果仅使用这些，则不需要编译器，并且可以使用仅运行时构建：

render(h) {
  return h('div', 'xxx')
}

捆绑器（例如 Vue CLI）：当您使用像 Vue CLI 这样的捆绑器时，它会为您预先构建模板到渲染函数中，以便在生产中不需要编译器。这允许仅运行时构建。

该文档描述了这样运行：

运行时：负责创建 Vue 实例、渲染和修补虚拟 DOM 等的代码。基本上一切都减去编译器。

因此，完整构建和仅运行时构建之间的区别在于包含或排除此模板编译器。

该文档解释是这样的：

如果您需要在客户端编译模板（例如将字符串传递给模板选项，或使用其 in-DOM HTML 作为模板安装到元素），您将需要编译器，因此需要完整的构建：

还有一个警告需要注意：

由于仅运行时构建的重量大约比完整构建版本轻 30%，因此您应该尽可能使用它

文档中还有使用打包器的完整构建的配置。例如，在 Webpack 中，它是：

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
    }
  }
}