在vue-cli 3.x的监视模式下执行自定义脚本并实现自动构建,可以通过在package.json中配置"scripts"字段来实现。
首先,需要在"scripts"字段中添加一个自定义脚本命令,例如:"build:custom": "node scripts/customBuild.js"。这里将自定义构建的脚本命名为customBuild.js,并使用node命令来执行该脚本。
接下来,在自定义构建脚本customBuild.js中,可以编写具体的构建逻辑。可以使用Node.js的相关模块进行文件操作、调用shell命令等。例如,可以使用fs模块来监听文件变化,当文件发生变化时执行构建命令。
下一步,需要在vue.config.js中配置webpack的watchOptions,使其监视文件的变化并触发自定义构建脚本。可以在vue.config.js的configureWebpack选项中添加以下代码:
module.exports = {
configureWebpack: {
watchOptions: {
ignored: /node_modules/,
aggregateTimeout: 300,
poll: 1000
}
}
}
其中,ignored用于指定忽略的文件夹或文件,这里忽略了node_modules文件夹。aggregateTimeout用于设置文件变化的等待时间(毫秒),当文件变化后的300毫秒内没有再次变化时才会触发构建。poll用于设置轮询的时间间隔(毫秒),每隔1秒轮询一次文件变化。
最后,在命令行中运行npm run build:custom,即可启动自定义构建脚本并进入监视模式。每次文件发生变化时,都会触发自动构建。
参考链接:
领取专属 10元无门槛券
手把手带您无忧上云