Detailed explanation of vue-cli multi-page engineering practice
Updated: August 30, 2017 09:42:00 Author: Shuimujiang
This article mainly introduces the detailed explanation of the multi-page engineering practice of vue-cli. The editor thinks it is quite good. I will share it with you now and give you a reference. Let's take a look with the editor
,
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',page]
}));
}
Meanwhile, delete the HtmlWebpackPlugin in and.
At this time, visit localhost:8080/ and localhost:8080/page1 to see the effect.
Multi-page support in vue-router history mode
The vue-router history mode requires web server support. Here we demonstrate that express in the dev environment supports multi-page history mode.
build/ in the originalrequire('connect-history-api-fallback')Local modification:
// handle fallback for HTML5 history API
// When rewrite, please note that js files will also be rewrited.let utils = require("./utils");
let history = require('connect-history-api-fallback');
let pages = ("./src/modules/**/");
let rewrites = [];
for(let page in pages){
// match: /page/* or /page
({from: new RegExp('\/'+page+'\/|^\/'+page+'$'), to: '/'+page+'/'})
}
(history({
rewrites: rewrites
}));
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.