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

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