Vue CLI 是一個(gè)為 Vue.js 提供的標(biāo)準(zhǔn)工具鏈的基礎(chǔ)設(shè)施。

它包含了一個(gè)強(qiáng)大的插件系統(tǒng)，可以幫助我們快速構(gòu)建出一個(gè)基于 Vue.js 的項(xiàng)目。為了更好的滿足開發(fā)者需求， Vue CLI 也提供了多頁構(gòu)建的配套方案。

所謂多頁構(gòu)建，是指按照頁面進(jìn)行組織，一個(gè)頁面對(duì)應(yīng)一個(gè) HTML 文件。這一模式常被應(yīng)用在一些多門戶、多平臺(tái)、多頁面等場(chǎng)景中。在 Vue CLI 2.x 中，多頁構(gòu)建的實(shí)現(xiàn)通常需要開發(fā)者手動(dòng)配置多個(gè)入口文件和 HTML 模板文件，比較繁瑣。

而在 Vue CLI 3.x 中，隨著 build 和 serve 命令新增的多個(gè)選項(xiàng)參數(shù)，多頁構(gòu)建的配置也變得更加簡(jiǎn)單。我們可以使用 @vue/cli-plugin-multi-page 插件同時(shí)構(gòu)建出多個(gè)獨(dú)立的頁面。

// vue.config.js
module.exports = {
pages: {
// 頁面1
index: {
entry: 'src/pages/index/main.js',
template: 'src/pages/index/index.html',
filename: 'index.html'
},
// 頁面2
about: {
entry: 'src/pages/about/main.js',
template: 'src/pages/about/about.html',
filename: 'about.html'
}
}
}

使用 pages 選項(xiàng)指定多個(gè)頁面時(shí)，每個(gè)子選項(xiàng)是一個(gè)頁面的配置信息，包含 entry、template 和 filename 三個(gè)屬性。

entry 是頁面的入口文件，template 是 HTML 模板文件，filename 是生成的 HTML 文件名。與單頁模式一樣，多頁模式也支持各種自定義配置，可以根據(jù)實(shí)際需求進(jìn)行靈活設(shè)置。

綜上所述，Vue CLI 的多頁構(gòu)建方案為我們提供了一種更加靈活的前端項(xiàng)目組織方式，可以更好地解決一些多頁面場(chǎng)景下的問題。開發(fā)者可以根據(jù)需求選擇適合自己的模式進(jìn)行開發(fā)，以實(shí)現(xiàn)更好的效果和體驗(yàn)。