Wie verbindet main.js mit Index.html in Vue-cli webpack Vorlage

Ich bemerkte vue-cli webpack project-name Vorlage lädt diese Codes.Wie verbindet main.js mit Index.html in Vue-cli webpack Vorlage

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> 
....

Die beiden miteinander verbunden sind. Wie sind sie jedoch verbunden? Es scheint ein Ergebnis der build.js zu sein aber ich bin nicht in der Lage, den Code zu verstehen, wie es usw. zusammengestellt und minimierte, uglified wurde ...

Meine webpack.config.js Einstellungen ist Standardvorlage.

Quelle

2017-12-03 mingsterism

'el: "#app"' erzählt Vue Vue auf dem 'div' mit dem' id' von 'app' zu instanziiert. Ich erwarte, dass Sie einen Fehler bei dem, was Sie gepostet haben, haben. es ist nicht "class =" app "', seine 'id =" app "'. – Bert

Ja. Du hast recht. Dieser Fehler wurde geändert. Aber ich versuche, meine eigene Webpack-Konfiguration von Grund auf neu zu schreiben. Allerdings weiß ich nicht, welche Codezeile für ** el verantwortlich ist: "#app" sagt Vue, um das Vue auf dem Div mit der ID der App zu instanziieren ** Wo kann ich es in der Vorlage finden? – mingsterism

Es ist die zweite Zeile in Ihrem ersten Block in Ihrer Frage geschrieben. Wenn Sie versuchen, Ihre eigene webpack.config.js zu schreiben, sollten Sie mit der Vorlage "webpack-simple" beginnen. Es ist viel einfacher, eine Vorstellung davon zu bekommen, was hier vor sich geht. – Bert

Sie Projekt Webpack als Modul bundler verwendet - es app.js in index.html spritzt

ein nicht-uglified Bündel zu erhalten, bearbeiten Sie die Webpack Einstellungen wie folgt aus:

Kommentar Call-Plugin uglifyjs-webpack-Plugin in build/webpack.prod.conf.js

vor

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

nach

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

auch, wenn Sie den Namen index.html foo.html der Eingabedatei ändern möchten, können Sie es hier tun:

Linie 68 in build/webpack .prod.conf.js Änderung

template: 'foo.html',

Quelle

2017-12-04 13:30:10

Wie verbindet main.js mit Index.html in Vue-cli webpack Vorlage

Antwort

Verwandte Themen