[Vue warn]: You are using the runtime-only build of Vue 牵扯到Vue runtime-compiler与runtime-only区别

最新推荐文章于 2024-11-08 16:44:11 发布

原创最新推荐文章于 2024-11-08 16:44:11 发布 · 628 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

Vue 专栏收录该内容

48 篇文章

订阅专栏

本文详细阐述了Vue中的runtime-compiler和runtime-only两种模式的工作流程，解释了template编译为render函数的过程，并对比了它们在模板编译上的差异。通过实例配置webpack和vue.config.js，展示了如何在项目中切换这两种模式。

[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.

1. Vue的编译渲染过程

template --> ast --> render函数 --> VDom --> 真实DOM

先将template解析(parse)成抽象语法树(ast)
将ast编译(compiler)成render函数
将render函数渲染(render)成虚拟DOM
最后将虚拟DOM渲染成真实DOM

(1) runtime-compiler的步骤
template --> ast --> render函数 --> VDom --> 真实DOM

(2) runtime-only的步骤
render函数 --> VDom --> 真实DOM

vue中两者的切换

/* 带webpack显性配置的 */
//webpack.config.js
//其实就是取别名，找到以 vue 结尾的，就去node_modules重新查一下路径
module.exports = {
  resolve: {
   alias: {
    'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
  }
 }
}


/* webpack隐性配置的 */
//vue.config.js
//true 就是完整版的（即runtime-compiler）
module.exports = {
  runtimeCompiler: true  //ture: runtime-compiler  false: runtime-only
}