原标题：[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 文件中

两层判断：

1、先判断是不会 product 环境

constisProd =

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) ])

通过 plugin 生成插件，名字为 move-index

然后 use 来加载对应的插件，里面还有参数

这个对应的配置，默认的编译之后的目录是 dist，传入了 2 个路径：

/* config.plugin('move-index') */

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

我们看一下 webpack 4 下的插件是如何编写的：

1、它是 class 的方式：

定义了一个 MovePlugin的 class

内部包含了 constructor 和 apply(参数是 compiler)

module.exports = classMovePlugin{

constructor() {} apply (compiler) {} }

2、constructor里面其实要处理传入的参数：

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

定义了一个 from，一个 to，然后其实就是把 from 通过 fs 的 moveSync 函数移动到 to 里面：

这里我们依赖了工具包：fs-extra

constfs = require('fs-extra')

具体流程如下：

先通过 fs.existsSync判断 from 的路径是否存在

再调用fs.moveSync来移动文件，设置了 overwrite为 true

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

责任编辑：