[Vue CLI 3] 配置解析之 indexPath

在 vue.config.js 配置中有一個 indexPath 的配置，咱們先看看它有什麼用？

用來 指定 index.html 最終生成的路徑（相對於 outputDir）

先看看它的默認值：在文件 @vue/cli-service/lib/options.js 中

indexPath: joi.string()

默認值：

indexPath: 'index.html'

使用案例：

咱們在 vue.config.js 中配置：

indexPath: '1/2/3/b.html'

最終在編譯以後的目錄 dist(默認)下面會生成：

1/2/3/b.html 的文件，內部不會發生變化

咱們看一下背後的實現：@vue/cli-service/lib/config/app.js 文件中

兩層判斷：

一、先判斷是不會 product 環境

const isProd = process.env.NODE_ENV === 'production'
if (isProd) {}

二、是否配置了 indexPath

if (options.indexPath !== 'index.html') {
}

經過內置的插件去修改路徑，插件文件在 cli-service/lib/webpack/MovePlugin.js

webpackConfig
  .plugin('move-index')
  .use(require('../webpack/MovePlugin'), [
    path.resolve(outputDir, 'index.html'),
    path.resolve(outputDir, options.indexPath)
  ])

這個對應的配置，默認的編譯以後的目錄是 dist，傳入了 2 個路徑：

/* config.plugin('move-index') */
new MovePlugin(
  '/Users/***/dist/index.html',
  '/Users/***/dist/1/2/3/b.html'
)

咱們看一下 webpack 4 下的插件是如何編寫的：

一、它是 class 的方式：

內部包含了 constructor 和 apply（參數是 compiler）

module.exports = class MovePlugin {
  constructor () {}
  apply (compiler) {}
}

二、constructor 裏面其實要處理傳入的參數：

constructor (from, to) {
  this.from = from
  this.to = to
}

定義了一個 from，一個 to，而後其實就是把 from 經過 fs 的 moveSync 函數移動到 to 裏面：

這裏咱們依賴了工具包：fs-extra

const fs = require('fs-extra')

具體流程以下：先判斷 from 的路徑是否存在

if (fs.existsSync(this.from)) {
  fs.moveSync(this.from, this.to, { overwrite: true })
}

三、apply 內部的結構呢

compiler.hooks.done.tap('move-plugin', () => {
    // ...
})

經過 compiler tap 來註冊插件，這裏的 done 是一個生命週期的鉤子函數：編譯完成

compiler.hooks.someHook.tap()

這裏還有其餘鉤子：

• run
• beforeRun
• compile
• beforeCompile
• afterCompile
• emit
• afterEmit