This article introduces how to use vue-cli to develop multi-page applications. It is shared with you. The details are as follows:
Modified webpack configuration file
Global configuration
Revise
Open ~\build\ , find entry, add multiple entry
entry: {
app: './src/',
app2: './src/',
app3: './src/',
},
When running and compiling, each entry will correspond to aChunk
run dev development environment
Revise
Open ~\build\ , find new HtmlWebpackPlugin under plugins, add the corresponding multiple pages behind it, and add Chunk configuration for each page
chunks: The app in ['app'] corresponds to the entry file set in the entry
plugins:[
// /ampedandwired/html-webpack-plugin
// Multiple pages: → new HtmlWebpackPlugin({
filename: '',//The generated html template: '',//Source html inject: true,//Whether to turn on injection chunks: ['app']//Chunk that needs to be introduced, if all page resources are introduced without configuration, }),
// Multiple pages: → new HtmlWebpackPlugin({
filename: '',//The generated html template: '',//Source html inject: true,//Whether to turn on injection chunks: ['app2']//Chunk that needs to be introduced, if all page resources are introduced without configuration, }),
// Multiple pages: → new HtmlWebpackPlugin({
filename: '',//The generated html template: '',//Source html inject: true,//Whether to turn on injection chunks: ['app3']//Chunk that needs to be introduced, if all page resources are introduced without configuration, })
]
run build
Modify config/
Open ~\config\, find the index under build: (__dirname, '../dist/'), and add multiple pages afterwards
build: {
index: (__dirname, '../dist/'),
index2: (__dirname, '../dist/'),
index3: (__dirname, '../dist/'),
},
Revise
Open ~\build\, find new HtmlWebpackPlugin under plugins, add the corresponding multiple pages behind it, and add Chunk configuration for each page
The filename in HtmlWebpackPlugin refers to the corresponding build in config/
plugins: [
// Multiple pages: → new HtmlWebpackPlugin({
filename: ,
template: '',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// /kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency',
chunks: ['manifest','vendor','app']//Chunk that needs to be introduced, if all page resources are introduced without configuration, }),
// Multiple pages: → new HtmlWebpackPlugin({
filename: .index2,
template: '',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency',
chunks: ['manifest','vendor','app2']//Chunk that needs to be introduced, if all page resources are introduced without configuration, }),
// Multiple pages: → new HtmlWebpackPlugin({
filename: .index3,
template: '',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency',
chunks: ['manifest','vendor','app3']//Chunk that needs to be introduced, if all page resources are introduced without configuration, }),
]
If there are many pages, you can consider using a loop to add HtmlWebpackPlugin to plugins
//
= function(globPath, pathDir) {
var files = (globPath);
var entries = {},
entry, dirname, basename, pathname, extname;
for (var i = 0; i < ; i++) {
entry = files[i];
dirname = (entry);
extname = (entry);
basename = (entry, extname);
pathname = (dirname, basename);
pathname = pathDir ? (new RegExp('^' + pathDir), '') : pathname;
entries[pathname] = ['./' + entry];
}
return entries;
}
//
var pages = (('../src/views/**/*.html', '../src/views/'));
(function (pathname) {
// /ampedandwired/html-webpack-plugin
var conf = {
filename: '../views/' + pathname + '.html', //The generated html storage path is relative to path
template: '../src/views/' + pathname + '.html', //html template path
inject: false, //JS insertion position, true/'head'/'body'/false
/*
* When compressing this, calling html-minify will cause many html syntax checking problems during compression.
* If you use the {{...}} expression on the html tag attribute, in many cases, you do not need to configure the compression item here.
* In addition, UglifyJsPlugin will compress the code together with html when compressing it.
* To avoid compressing html, you need to configure 'html?-minimize' on html-loader, see the configuration of html-loader in loaders.
*/
// minify: { //Compress HTML file // removeComments: true, //Remove comments in HTML // collapseWhitespace: false //Delete whitespace and line breaks // }
};
if (pathname in ) {
= 'src/images/';
= 'body';
= ['vendors', pathname];
= true;
}
(new HtmlWebpackPlugin(conf));
});
The same entry can also be used
//
entry: {
app: ('../src/scripts/**/*.js', '../src/scripts/')
},
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.