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设置为默认模板。
答
你项目中使用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',
'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