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

Z时代
2024-01-10
分类：问答

我注意到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, 
}), 
...