• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

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

JavaScript 来源:mingsterism 4次浏览

我注意到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', 

版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)