首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在vue-cli 3.x的监视模式下执行我自己的脚本,每次在vue-cli 3.x的监视模式下进行自动构建?

在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选项中添加以下代码:

代码语言:txt
复制
module.exports = {
  configureWebpack: {
    watchOptions: {
      ignored: /node_modules/,
      aggregateTimeout: 300,
      poll: 1000
    }
  }
}

其中,ignored用于指定忽略的文件夹或文件,这里忽略了node_modules文件夹。aggregateTimeout用于设置文件变化的等待时间(毫秒),当文件变化后的300毫秒内没有再次变化时才会触发构建。poll用于设置轮询的时间间隔(毫秒),每隔1秒轮询一次文件变化。

最后,在命令行中运行npm run build:custom,即可启动自定义构建脚本并进入监视模式。每次文件发生变化时,都会触发自动构建。

参考链接:

  • 自定义脚本命令:https://www.npmjs.com/package/vue-cli#npm-run-script
  • fs模块:https://nodejs.org/api/fs.html
  • webpack watchOptions:https://webpack.js.org/configuration/watch/
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券