在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

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

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

我用自己搭建webpack來(lái)打包vue，引入打包好的vue的時(shí)候，掛載元素消失了

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

相關(guān)代碼

1.這個(gè)是入口文件

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

2.這個(gè)是import引入的app文件內(nèi)容

import Vue from "vue";

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

3.這個(gè)是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.這個(gè)是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é)點(diǎn)

<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é)點(diǎn)#app不見了。。。不知道是為啥？

回答
編輯回答
萢萢糖

文檔鏈接

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

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

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

2017年1月14日 18:25