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

Question

I noticed vue-cli webpack project-name template loads these codes. 我注意到vue-cli webpack project-name模板加载了这些代码。

main.js main.js

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

index.html 的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>
....

The two are linked together. 这两者是联系在一起的。 However, how are they linked? 但是，它们是如何联系起来的？ It appears to be a result of build.js but I'm unable to understand the code as it has been compiled and minified, uglified etc... 它似乎是build.js的结果，但我无法理解代码，因为它已被编译和缩小，uglified等...

My webpack.config.js settings is default template. 我的webpack.config.js设置是默认模板。

Answer 1

you project used Webpack as a module bundler - it injects app.js into index.html 你使用Webpack作为模块捆绑器 - 它将app.js注入index.html

to get a non-uglified bundle, edit the Webpack settings like this: 要获取非uglified包，请编辑Webpack设置，如下所示：

comment call plugin uglifyjs-webpack-plugin in build/webpack.prod.conf.js 在build / webpack.prod.conf.js中注释调用插件uglifyjs-webpack-plugin

before 之前

...
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,
})
...

after 后

...
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,
}),
...

also if you want to change the name of index.html to foo.html of the input file you can do it here: 如果你想将index.html的名称更改为输入文件的foo.html，你可以在这里执行：

line 68 in build/webpack.prod.conf.js change to build / webpack.prod.conf.js中的第68行更改为

template: 'foo.html',

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

问题描述

1 个解决方案

解决方案1
0 2017-12-04 13:30:10

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

问题描述

1 个解决方案

解决方案1 0 2017-12-04 13:30:10

解决方案1
0 2017-12-04 13:30:10