main.js如何鏈接到Vue-cli webpack模板中的Index.html

我注意到vue-cli webpack project-name模板加載了這些代碼。main.js如何鏈接到Vue-cli webpack模板中的Index.html

main.js

... 
new Vue({ 
    el: '#app', 
    render: h => h(App), 
});

的index.html

... 
<head> 
... 
</head> 
<body> 
    <div id="app"></div> <!-- if I change app to app1, error message states: "Cannot find element app" --> 
    <script src="./dist/build.js"></script> 
</body> 
....

兩個連接在一起。但是，它們是如何鏈接的？這似乎是build.js結果，但我無法理解的代碼，因爲它已經被編譯和精縮，變醜等..

我webpack.config.js設置爲默認模板。

來源

2017-12-03 mingsterism

'EL：「#APP」'告訴Vue公司與app'的'了'id'實例化Vue公司的'div'。我希望你發佈的內容有錯誤，它不是'class =「app」'，它的'id =「app」'。 – Bert

是的。你是對的。改變了那個錯誤。但我試圖從頭開始寫自己的webpack配置。然而，我不知道哪一行代碼是負責** el：「#app」告訴Vue實例化應用程序的ID的div上的Vue **我在哪裏可以在模板中找到它？ – mingsterism

這是您的問題中發佈的第一段代碼中的第二行。如果你想寫自己的webpack.config.js，我建議你從'webpack-simple'模板開始。從中可以更容易地瞭解發生了什麼。 – Bert

你項目中使用Webpack作爲一個模塊捆綁 - 它注入到app.js的index.html

獲得非變醜束，編輯的WebPack設置是這樣的：

評論調用插件uglifyjs-的WebPack-插件在構建/webpack.prod.conf.js

之前

... 
plugins: [ 
// http://vuejs.github.io/vue-loader/en/workflow/production.html 
new webpack.DefinePlugin({ 
    'process.env': env 
}), 
new UglifyJsPlugin({ 
    uglifyOptions: { 
    compress: { 
     warnings: false 
    } 
    }, 
    sourceMap: config.build.productionSourceMap, 
    parallel: true 
}), 
// extract css into its own file 
new ExtractTextPlugin({ 
    filename: utils.assetsPath('css/[name].[contenthash].css'), 
    // set the following option to `true` if you want to extract CSS from 
    // codesplit chunks into this main css file as well. 
    // This will result in *all* of your app's CSS being loaded upfront. 
    allChunks: false, 
}) 
...

後

... 
plugins: [ 
// http://vuejs.github.io/vue-loader/en/workflow/production.html 
new webpack.DefinePlugin({ 
    'process.env': env 
}), 
// new UglifyJsPlugin({ 
// uglifyOptions: { 
//  compress: { 
//  warnings: false 
//  } 
// }, 
// sourceMap: config.build.productionSourceMap, 
// parallel: true 
// }), 
// extract css into its own file 
new ExtractTextPlugin({ 
    filename: utils.assetsPath('css/[name].[contenthash].css'), 
    // set the following option to `true` if you want to extract CSS from 
    // codesplit chunks into this main css file as well. 
    // This will result in *all* of your app's CSS being loaded upfront. 
    allChunks: false, 
}), 
...

此外，如果你想改變的index.html的名稱foo.html輸入文件，你可以在這裏做到這一點：

線68 構建/的WebPack .prod.conf.js變化

template: 'foo.html',

來源

2017-12-04 13:30:10

main.js如何鏈接到Vue-cli webpack模板中的Index.html

回答

相關問題