鍍金池/ 問答/HTML/ webpack打包后vue掛載根節(jié)點元素消失了

webpack打包后vue掛載根節(jié)點元素消失了

我用自己搭建webpack來打包vue，引入打包好的vue的時候，掛載元素消失了

搭建自己的webpack打包環(huán)境主要是想學習vue

相關代碼

1.這個是入口文件

import Vue from 'vue'
import Child from './app'
new Vue({
    el: '#app',
    data: {
        msg: 'this is msg'
    },
    render: (h) => h(Child)
})

2.這個是import引入的app文件內容

import Vue from "vue";

var Child = Vue.component('Child', {
    template: `<div><span>hello world</span></div>>`
});
export default Child;

3.這個是index.html文件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="app">
    {{msg}}
</div>
<script src="./dist/main.js"></script>
</body>
</html>

4.這個是webpack配置文件、

module.exports = {
    entry: {main: './1.js'},
    output: {
        path: __dirname + '/dist',
        filename: '[name].js'
    },
    module: {
        rules: [
            {
                test: "/\.js$/",
                exclude: "/node_modules/",
                loader: "babel-loader"
            }
        ]
    },
    resolve: {
        alias: {
            'vue':'vue/dist/vue.common.js'
        }
    }
}

下面是瀏覽器元素節(jié)點

<html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title></head>
<body>
<div><span>hello world</span></div>
<script src="./dist/main.js"></script>
</body>
</html>

可以看到的index.html的根節(jié)點#app不見了。。。不知道是為啥？

回答
編輯回答
萢萢糖

文檔鏈接

提供的元素只能作為掛載點。不同于 Vue 1.x，所有的掛載元素會被 Vue 生成的 DOM 替換。因此不推薦掛載 root 實例到 <html> 或者 <body> 上。
2018年1月22日 15:45
編輯回答
紓惘

官方文檔喲說明，vue 2版本以后，就利用 js中組件生成的 html模板替換掉 el節(jié)點本身，而不是append進去的。

https://cn.vuejs.org/v2/api/#el

2017年1月14日 18:25