vue渲染运行模式

vue有两种运行版本：Compiler 版本、Runtime 版本。
默认是Runtime 版本。

一. Runtime 运行版本

使用 vue-loader 加载.vue 文件时，webpack在打包过程中对模板进行了渲染。

vue文件

<template>
    <div>
        <base-test></base-test>
    </div>
</template>

<script>
    import BaseTest from './base-test.vue'
    export default {
        components:{
            BaseTest
        }
    }
</script>

二. Compiler 运行版本

template使用字符串模板

let body = document.body;
let element = document.createElement('div');
    element.id = 'dom1';
    body.appendChild(element);
    new Vue({
      el:'#' + element.id,
      template:`
        <div>组件1</div>
     `
})

模板运行配置

vue默认是Runtime的模式运行，在项目里面直接使用template字符串模板的Compiler运行模式会报错。

error.PNG

在vue项目的根目录下的vue.config.js文件下添加一下以下配置命令，如果没有这个文件，就在根目录下新建一个名称为vue.config.js的文件，添加以下配置。

//  脚手架 vue-cli 3.x 以及 vue-cli 4.x
module.exports = {
  runtimeCompiler: true,
}