在 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 文件中

兩層判斷：

1、先判斷是不會 product 環境

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

2、是否配置了 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 下的插件是如何編寫的：

1、它是 class 的方式：

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

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

2、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 })
}

3、apply 內部的結構呢

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

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

compiler.hooks.someHook.tap()

這裏還有其他鉤子：

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

來源：https://segmentfault.com/a/1190000016267660

[Vue CLI 3] 配置解析之 indexPath