Question

我注意到vue-cli webpack project-name模板加载了这些代码。

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设置是默认模板。

Answer 1

您使用 Webpack 作为模块捆绑器 - 它将app.js注入index.html

获取非uglified包，编辑Webpack设置如下：

build / webpack.prod.conf.js

中的

评论调用插件 uglifyjs-webpack-plugin

前

...
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，您可以在此处执行此操作：

build / webpack.prod.conf.js 中的第68行更改为

template: 'foo.html',

main.js如何链接到Vue-cli webpack模板

1 个答案: