You are using the runtime-only build of Vue where the template compiler is not a

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.

你正在使用的是runtime-only构建vue,所以template compiler不可用,要么使用render函数预编译模板,要么使用包含compiler的来构建

导致错误的代码

index.js

import Vue from 'vue'
var app = new Vue({
    el:"#app",
    data: {
        message: 'Hello Vue!'
      }
})

index.html

<div id="app">{{message}}</div>

vue代码有两个版本?

一个版本是runtimecompiler

emplate -> ast -> render -> vdom -> UI

一个是runtimeonly

render -> vdom -> UI

二者区别在于如何渲染元素

看起来,我使用的版本是runtimeonly的版本,所以解决办法是换成用包含compiler版本的即可

方法一

解决,引用vue的时候指定引用esm版本

import Vue from 'vue/dist/vue.esm'

方法二

更改渲染元素的方式

Index.js

import Vue from 'vue'
import App from './App.vue'
var app = new Vue({
    el:"#app",
    render: h=>h(App)
})

App.vue

<template>
    <div>{{msg}}</div>
</template>

<script>
    export default{
        data(){
            return {
                msg:'你好啊!'
            }
        }
    }
</script>

<style>
</style>

Index.html

  <div id="app"></div>

参考

vue-cli/Runtime-Compiler和Runtime-Only的区别