直接进入主题:
首先:鸣谢 JayZangwill 的解答。附上他的github,参考他的也是可以的
vue-cli脚手架搭建,是单页面,但改成多页面,就得自己手动配置
1、build/webpack.base.conf.js
/*== 修改添加 开始 ==*/ const glob = require('glob') const entry = getEntries('./src/module/**/*.js') // 获得入口js文件 /*== 修改添加 结束 ==*/ function resolve (dir) { return path.join(__dirname, '..', dir) } /*== 修改添加 开始 ==*/ function getEntries(path) { let entries = {}; glob.sync(path).forEach(entry => { if(/(\module\/(?:.+[^.js]))/.test(entry)) { entries[RegExp.$1.replace(/\/\w+\b/, '')]=entry; } }) return entries; } /*== 修改添加 结束 ==*/ module.exports = { context: path.resolve(__dirname, '../'), // entry: { // app: './src/main.js' // }, /*== 修改添加 结束 ==*/ entry, /*== 修改添加 结束 ==*/ ……………… }
2:build/webpack.dev.conf.js
/*== 修改添加 开始 ==*/ const glob = require('glob') const entry = getEntries('./src/module/**/*.html') // 获得入口hmtl文件 /*== 修改添加 结束 ==*/ plugins: [ ……………… /*== 修改添加 开始 ==*/ // new HtmlWebpackPlugin({ // filename: 'index.html', // template: 'index.html', // inject: true // }), /*== 修改添加 结束 ==*/ // copy custom static assets ……………… module.exports = new Promise((resolve, reject) => { ……………… /*== 修改添加 开始 ==*/ for (let pathname in entry) { let conf = { filename: `${pathname}.html`, template: entry[pathname], inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true // more options: // https://github.com/kangax/html-minifier#options-quick-reference }, // necessary to consistently work with multiple chunks via CommonsChunkPlugin chunksSortMode: 'dependency' } if (pathname in devWebpackConfig.entry) { conf.chunks = ['manifest', 'vendor', pathname]; conf.hash = true; } devWebpackConfig.plugins.push(new HtmlWebpackPlugin(conf)); } /*== 修改添加 结束 ==*/ resolve(devWebpackConfig) } }) }) 文末底部: /*== 修改添加 开始 ==*/ function getEntries(path) { let entries = {}; glob.sync(path).forEach(entry => { if (/(\module\/(?:.+[^.html]))/.test(entry)) { entries[RegExp.$1.replace(/\/\w+\b/, '')] = entry; } }) return entries; } /*== 修改添加 结束 ==*/
3、build/webpack.prod.conf.js
/*== 修改添加 开始 ==*/ const glob = require('glob') const entry = getEntries('./src/module/**/*.html') // 获得入口hmtl文件 /*== 修改添加 结束 ==*/ plugins: [ ………………………… /*== 修改添加 开始 ==*/ // new HtmlWebpackPlugin({ // filename: config.build.index, // template: 'index.html', // inject: true, // minify: { // removeComments: true, // collapseWhitespace: true, // removeAttributeQuotes: true // // more options: // // https://github.com/kangax/html-minifier#options-quick-reference // }, // // necessary to consistently work with multiple chunks via CommonsChunkPlugin // chunksSortMode: 'dependency' // }), /*== 修改添加 结束 ==*/ ……………… ] ……………… /*== 修改添加 开始 ==*/ for (let pathname in entry) { let conf = { filename: `${pathname}.html`, template: entry[pathname], inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true // more options: // https://github.com/kangax/html-minifier#options-quick-reference }, // necessary to consistently work with multiple chunks via CommonsChunkPlugin chunksSortMode: 'dependency' } if (pathname in webpackConfig.entry) { conf.chunks = ['manifest', 'vendor', pathname]; conf.hash = true; } webpackConfig.plugins.push(new HtmlWebpackPlugin(conf)); } /*== 修改添加 结束 ==*/ ……………… 文本底部: /*== 修改添加 开始 ==*/ function getEntries(path) { let entries = {}; glob.sync(path).forEach(entry => { if (/(\module\/(?:.+[^.html]))/.test(entry)) { entries[RegExp.$1.replace(/\/\w+\b/, '')] = entry; } }) return entries; } /*== 修改添加 结束 ==*/
4、启动项目
链接:
PC端 :http://localhost:8666/modules/backend.html
移动APP :http://localhost:8666/modules/index.html
项目地址:
https://github.com/Summer-Lin/vue-multiple-page