请教一下组件渲染报错怎么解决，webpack打包没有报错，浏览器渲染报错

Question

<div id="app">
        <h1>app part - - {{msg}}</h1>
        <hr>
        <home></home>
    </div>

这是单文件组件Home.vue

<template>
    <div>
        <h1>home page - - {{msg}}</h1>
    </div>
</template>

<style>
    h1{
        color:red;
    }
</style>

<script>

    export default {
        data() {
            return {
                msg:'hello home'
            }
        }
    }
</script>

父组件

import Vue from 'vue';
import Home from './Home'



let app = new Vue({
    el:'#app',
    components:{Home},
    data:{
        msg:'hello icky'
    },
    created(){
        console.log(Home,this)
    }
})

报的错误

Answer 1

你好，想先请问一下 <div id="app"> 这段代码是写在哪个文件下的？
如果你这段代码是写在 index.html 下，那么这个问题涉及到两个点
1、首先需要理解下面这张图

而home组件没有显示出来，是因为 <div id="app">中的内容会被vue解析后的dom结构替换掉，也就是说你配在里面的 <home> 不生效。
2、从题主的截图中，我没法看清楚你是否配置了入口文件，在脚手架环境下使用vue的话，正常都会有一个 main.js 和 App.vue，通过App.vue指定入口文件，main.js来指定将vue挂载到 <div id="app">上。因此，如果在 App.vue 中引入 Home.vue，并且使用 <home>的话，就能够生效。