[Vue CLI 3] 多頁應用實踐和原始碼設計

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

pages: {
    index: {      // page 的入口
      entry: 'src/index/main.js',      // 模板來源
      template: 'public/index.html',      // 在 dist/index.html 的輸出
      filename: 'index.html',      // 當使用 title 選項時，
      // template 中的 title 標籤需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Index Page',      // 在這個頁面中包含的塊，預設情況下會包含
      // 提取出來的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },    // 當使用只有入口的字串格式時，
    // 模板會被推導為 `public/subpage.html`
    // 並且如果找不到的話，就回退到 `public/index.html`。
    // 輸出檔名會被推導為 `subpage.html`。
    subpage: 'src/subpage/main.js'
  }

每一個頁面中就是一個物件，包含了如下配置：

• entry       入口檔案的路徑

• template    模板檔案的路徑

• filename    編譯之後的 html 檔名

• title       html 中的 title

• chunks      打包的 chunk 檔案，陣列格式，包含入口檔案

首先，我們需要設計一下 src 目錄下面放置 multi-page 的檔案：

看了很多多頁專案，有 2 個方案：

• 一種叫 pages 資料夾

• 一種叫 views 或者其他名字的資料夾

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

我們再看一下里面的檔案：

• 入口檔案：檔名可以叫 main.js 或者 index.js

• 模板檔案：可以用統一的 'public/index.html'，或者目錄內放置一個自己的，取名 index.html

• title：可以從一個檔案裡面取

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

下面就是透過函式來生成 pages 的配置：

第一步：找到入口檔案

可以用 glob

const glob = require('glob')

pages 目錄的位置，可以用相對路徑，也可以用絕對路徑：

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

定義一個 pages 物件：

const pages = {}

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

這裡就是去設定對應幾個 key 了，很多專案基本多是透過

/ 分隔符來對字串進行陣列話，然後簡單地獲取

但是熟悉 node.js path 模組的會如下處理：

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

往 pages 裡面迴圈設定：

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

關於 template 稍微複雜一點，我們需要做判斷，如果存在就用自定義的，如果不存在就用通用的

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

然後透過 fs.existsSync 會判斷自定義檔案是否存在:

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

當然後面我們分享了原始碼之後，你就會發現你做了無用功

---

下面我們看一下原始碼實現部分:

每個版本的 cli-service 多有微小的改動

cli-service/lib/config/app.js 檔案

定義了一個變數 multiPageConfig 獲取 vue.config.js 取出來的 pages：

const multiPageConfig = options.pages

清空一次 entry

webpackConfig.entryPoints.clear()

透過 Object.keys 獲取 keys，然後  forEach 迴圈

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

迴圈內部：

先定義要用的變數，從 multiPageConfig[name] 的每一個物件取：

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

normalizePageConfig 函式如下：

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

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

設定 entry

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

hasDedicatedTemplate 是判斷

使用者傳遞的多頁配置自定義模板路徑是否存在：

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

templatePath 的處理細節：

htmlPath 路徑是：

/Userspublic/index.html

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

defaultHtmlPath 路徑是：

/Usersnode_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

最終透過 html-webpack-plugin 外掛來生成指定名字的 html 檔案到指定目錄：

1、指定目錄：

由 vue.config.js 中的 outputDir 來決定

const outputDir = api.resolve(options.outputDir)

2、生成 webpack config 關於 html-webpack-plugin 的部分：

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

pageHtmlOptions 的處理細節：

傳遞給 html-webpack-plugin 外掛的引數，這裡預設會設定 chunks 的，所以上面實戰中配置也是無用功

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

作者：dailyvuejs
連結：