// vue project directory structure
src
├── pages
│ ├── pageA
│ │ ├── index.vue
│ │ └── main.js
│ ├── pageB
│ └── pageC
├── components
├── ...
hasPrivateHtmlTemplate
means ${pageDirPath}/index.html
file exist. This file will be the template html for the page.
hasPrivatePageConf
means ${pageDirPath}/page.config.js
commondjs mode file exist which module.exports
is a PageConfig
type data, and this config data will merge to the default config data generated, by using Object.asign()
method.
// The generated pages data, example for pageA
pageDirPath = 'absolute_path_to_src/pages/pageA'
pageName = 'pageA'
pageAConfig = {
pageA: {
entry: `${pageDirPath}/main.js`,
template: hasPrivateHtmlTemplate
? `${pageDirPath}/index.html`
: path_resolve('public/index.html'),
filename: `${pageName}.html`,
title: pageName,
chunks: ['chunk-vendors', 'chunk-common', pageName]
}
}
// The pageConfig data for others page is the same as pageAConfig
Usage
// vue.config.js
const pages = requrie('webpack-get-pages-config')
module.exports = {
pages
}