我們看一下官網(wǎng)給的 multi-page 的配置：需要在 vue.config.js 配置 pages，示例如下：

pages: {
    index: {
      // page 的入口
      entry: 'src/index/main.js',
      // 模板來(lái)源
      template: 'public/index.html',
      // 在 dist/index.html 的輸出
      filename: 'index.html',
      // 當(dāng)使用 title 選項(xiàng)時(shí)，
      // template 中的 title 標(biāo)簽需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Index Page',
      // 在這個(gè)頁(yè)面中包含的塊蒙兰，默認(rèn)情況下會(huì)包含
      // 提取出來(lái)的通用 chunk 和 vendor chunk姻采。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // 當(dāng)使用只有入口的字符串格式時(shí)两残，
    // 模板會(huì)被推導(dǎo)為 `public/subpage.html`
    // 并且如果找不到的話，就回退到 `public/index.html`逢捺。
    // 輸出文件名會(huì)被推導(dǎo)為 `subpage.html`。
    subpage: 'src/subpage/main.js'
  }

每一個(gè)頁(yè)面中就是一個(gè)對(duì)象癞季，包含了如下配置：

• entry 入口文件的路徑
• template 模板文件的路徑
• filename 編譯之后的 html 文件名
• title html 中的 title
• chunks 打包的 chunk 文件蒸甜，數(shù)組格式，包含入口文件

首先余佛，我們需要設(shè)計(jì)一下 src 目錄下面放置 multi-page 的文件：

看了很多多頁(yè)項(xiàng)目柠新，有 2 個(gè)方案：

• 一種叫 pages 文件夾
• 一種叫 views 或者其他名字的文件夾

大家自行選擇或者定義就好了，這里我們選 pages

我們?cè)倏匆幌吕锩娴奈募?/p>

• 入口文件：文件名可以叫 main.js 或者 index.js
• 模板文件：可以用統(tǒng)一的 'public/index.html'辉巡，或者目錄內(nèi)放置一個(gè)自己的恨憎，取名 index.html
• title：可以從一個(gè)文件里面取

src
  pages
    page1
      index.html
      main.js
      App.vue
    page2
      index.html
      main.js
      App.vue 

下面就是通過(guò)函數(shù)來(lái)生成 pages 的配置：

第一步：找到入口文件

可以用 glob

const glob = require('glob')

pages 目錄的位置，可以用相對(duì)路徑郊楣，也可以用絕對(duì)路徑：

const path = require('path')
const PAGES_PATH = path.resolve(__dirname, './src/pages')

定義一個(gè) pages 對(duì)象：

const pages = {}

glob.sync(PAGES_PATH + '/*/main.js').forEach(filepath => {
  // ...
})

這里就是去設(shè)置對(duì)應(yīng)幾個(gè) key 了憔恳，很多項(xiàng)目基本多是通過(guò)

/ 分隔符來(lái)對(duì)字符串進(jìn)行數(shù)組話，然后簡(jiǎn)單地獲取

但是熟悉 node.js path 模塊的會(huì)如下處理：

const pageName = path.basename(path.dirname(filepath))

往 pages 里面循環(huán)設(shè)置：

pages[pageName] = {
    entry: filepath,
    filename: `${pageName}.html`,
    chunks: ['chunk-vendors', 'chunk-common', pageName]
  }

關(guān)于 template 稍微復(fù)雜一點(diǎn)净蚤，我們需要做判斷钥组，如果存在就用自定義的，如果不存在就用通用的

const templatePath = path.dirname(filepath) + '/index.html'

然后通過(guò) fs.existsSync 會(huì)判斷自定義文件是否存在:

if (!fs.existsSync(templatePath)) {
    // 入口如果不配置直接使用
    templatePath = 'public/index.html'
  }

當(dāng)然后面我們分享了源碼之后今瀑，你就會(huì)發(fā)現(xiàn)你做了無(wú)用功

下面我們看一下源碼實(shí)現(xiàn)部分:

每個(gè)版本的 cli-service 多有微小的改動(dòng)

cli-service/lib/config/app.js 文件

定義了一個(gè)變量 multiPageConfig 獲取 vue.config.js 取出來(lái)的 pages：

const multiPageConfig = options.pages

清空一次 entry

webpackConfig.entryPoints.clear()

通過(guò) Object.keys 獲取 keys程梦，然后 forEach 循環(huán)

const pages = Object.keys(multiPageConfig)
pages.forEach(name => {
})

循環(huán)內(nèi)部：

先定義要用的變量，從 multiPageConfig[name] 的每一個(gè)對(duì)象乳佘：

const {
          title,
          entry,
          template = `public/${name}.html`,
          filename = `${name}.html`,
          chunks
        } = normalizePageConfig(multiPageConfig[name])

normalizePageConfig 函數(shù)如下：

處理 subpage: 'src/subpage/main.js' 的情況

const normalizePageConfig = c => typeof c === 'string' ? { entry: c } : c

設(shè)置 entry

webpackConfig.entry(name).add(api.resolve(entry))

hasDedicatedTemplate 是判斷

用戶傳遞的多頁(yè)配置自定義模板路徑是否存在：

const fs = require('fs')
const hasDedicatedTemplate = fs.existsSync(api.resolve(template))

templatePath 的處理細(xì)節(jié)：

htmlPath 路徑是：

/Users/*****/public/index.html

const htmlPath = api.resolve('public/index.html')

defaultHtmlPath 路徑是：

/Users/*****/node_modules/@vue/cli-service/lib/config/index-default.html

const defaultHtmlPath = path.resolve(__dirname, 'index-default.html')

如果：

1屿附、用戶自定義的模板存在就直接給 templatePath
2、如果不存在哥童，先取 public/index.html挺份，再不行就取 node_modules 里面的

const templatePath = hasDedicatedTemplate
          ? template
          : fs.existsSync(htmlPath)
            ? htmlPath
            : defaultHtmlPath

最終通過(guò) html-webpack-plugin 插件來(lái)生成指定名字的 html 文件到指定目錄：

1、指定目錄：

由 vue.config.js 中的 outputDir 來(lái)決定

const outputDir = api.resolve(options.outputDir)

2贮懈、生成 webpack config 關(guān)于 html-webpack-plugin 的部分：

const HTMLPlugin = require('html-webpack-plugin')
webpackConfig
          .plugin(`html-${name}`)
            .use(HTMLPlugin, [pageHtmlOptions])

pageHtmlOptions 的處理細(xì)節(jié)：

傳遞給 html-webpack-plugin 插件的參數(shù)匀泊，這里默認(rèn)會(huì)設(shè)置 chunks 的，所以上面實(shí)戰(zhàn)中配置也是無(wú)用功

const pageHtmlOptions = Object.assign({}, htmlOptions, {
          chunks: chunks || ['chunk-vendors', 'chunk-common', name],
          template: templatePath,
          filename: ensureRelative(outputDir, filename),
          title
        })