vue.js - 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 function .如果仅使用这些，则不需要编译器，并且可以使用仅运行时构建:

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

捆绑程序(例如 Vue CLI) :当你使用像 Vue CLI 这样的打包器时，它会为你预先构建你的模板到渲染函数中，这样在生产中就不需要编译器了。这允许仅运行时构建。
docs像这样描述运行时:

Runtime: code that is responsible for creating Vue instances, rendering and patching virtual DOM, etc. Basically everything minus the compiler.

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

If you need to compile templates on the client (e.g. passing a string to the template option, or mounting to an element using its in-DOM HTML as the template), you will need the compiler and thus the full build:

还有一个警告需要注意:

Since the runtime-only builds are roughly 30% lighter-weight than their full-build counterparts you should use it whenever you can

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

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