可以直接在vue.config.js 中 設置 pages屬性來做到
// vue.config.jsmodule.exports = {
pages: { index: { // 入口js的路徑
entry: './src/views/index/entry', // 頁面模板路徑
template: `./src/views/index/index.html`
}
}
}pages 可以遍歷獲得
在 @vue/cli-service/lib/config/app.js 中有下面一段，里面已經考慮了多頁的情況
// @vue/cli-service/lib/config/app.js...const multiPageConfig = options.pages
...if (!multiPageConfig) { // default, single page setup.
......
} else { // multi-page setup
webpackConfig.entryPoints.clear() const pages = Object.keys(multiPageConfig)
pages.forEach(name => { const {
entry,
template = `public/${name}.html`,
filename = `${name}.html`
} = multiPageConfig[name] // inject entry
webpackConfig.entry(name).add(api.resolve(entry)) // inject html plugin for the page
const pageHtmlOptions = Object.assign({}, htmlOptions, {
chunks: ['chunk-vendors', 'chunk-common', name],
template: fs.existsSync(template) ? template : defaultHtmlPath,
filename
})
webpackConfig
.plugin(`html-${name}`)
.use(HTMLPlugin, [pageHtmlOptions])
})
pages.forEach(name => { const { filename = `${name}.html` } = multiPageConfig[name]
webpackConfig
.plugin(`preload-${name}`)
.use(PreloadPlugin, [{
rel: 'preload',
includeHtmlNames: [filename],
include: { type: 'initial',
entries: [name]
},
fileBlacklist: [/\.map$/, /hot-update\.js$/]
}])
webpackConfig
.plugin(`prefetch-${name}`)
.use(PreloadPlugin, [{
rel: 'prefetch',
includeHtmlNames: [filename],
include: { type: 'asyncChunks',
entries: [name]
}
}])
})
}
