时间戳

首页 > 解决方案 > Vue 的仅运行时构建到底是什么，它与编译器构建有何不同？

vue.js - Vue 的仅运行时构建到底是什么，它与编译器构建有何不同？

问题描述

我收到此警告：

[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')

标签： vue.jsvuejs2

解决方案

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

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

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

CDN：当通过 CDN 使用 Vue 时，例如<script src="https://unpkg.com/vue"></script>，它通常是完整版本（除非您另外指定）。

仅运行时

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

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
    }
  }
}

推荐阅读