首页
学习
活动
专区
工具
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/
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

记录使用@vuecli搭建Vue3项目完整流程

1 安装vue/cli 更新到 3.x 之后,vue-cli 包名从 vue-cli 改成了 @vue/cli,如果之前全局安装了旧版本 vue-cli (1.x 或 2.x),首先需要使用以下命令卸载掉...2 创建项目 提供两种构建方式,一种是图形化方式创建项目,另外一种是命令行工具方式创建项目。 1.图形化:首先还是得指定目录下打开终端,然后运行: vue ui ? ?...default (Vue 3 Preview) ([Vue 3]babel, eslint) 新版本,Vue3预览版本 Manually select features 自己去选择需要功能,提供更多特性选择...这里选择3.x ? 路由模式,选择使用 history 路由模式,即输入 y,按enter键 ? 选择ESLint + Prettier,enter键 ?...选择什么时候执行 eslint 校验,我们选择 Lint on save: ? 接下来是选择以什么样形式配置以上所选功能,方便统一管理和入手。选择第二个 ?

1.3K1412
  • (上)》介绍了什么是脚手架,以及Vue-cli 2.x如何创建项目,创建项目结构。这篇文章介绍 Vue-cli 3.x 如何构建项目?...内运行脚本,我们发现 server 。...5.1、启动项目、打包 选择一个项目,进行导入之后,界面自动切换 选择任务 -> serve -> 点击开始运行,就可以看到项目的具体运行情况,文件大小、包依赖、运行时间,服务地址等等。...build 是进行打包。 5.2、项目配置 之前修改配置信息时候,我们需要在代码配置文件中修改,vue-cli 3提供图形化界面管理工具,可以直接在页面上修改配置信息。...配置信息分别如下图: 特殊说明:启动运行时编译 我们上篇文章介绍 Runtime+compiler 与 Runtime-only区别,启动运行时编译 其实就是选择Runtime-only 模式

    63820

    Vue3.0入门 + Vant3.0移动端实践(一)

    export default { } App.vue 文件添加 router-view 组件,渲染路由匹配到页面组件。...vue-cli 构建项目默认是不支持 less ,需要自己添加: yarn add less less-loader --dev less这玩意儿做什么用,因为vue中很少用到直接编辑css,...为了解决移动端适配问题,有两个库也必须装一,一个是阿里lib-flexible,一个是postcss-pxtorem(可自动完成px向rem转换。...前端开发还原设计稿重要性毋庸置疑,目前应用单位最多还是rem,然而每次制作过程中需要自己计算rem值,为了能够直接按照设计图尺寸开发,并且能自动编译转换成rem.)...然后我们views/Home.vue里引入展示,看看效果: import

    1.9K20

    使用 Vue-CLI 3.x 快速搭建「Vue + TS + Kbone + Kbone-UI + 云开发」 项目

    使用 vue-cli 3.x可视化页面根据自己需求创建一个ts 空项目即可。...Kbone 提供了 vue-cli 3.x 插件,可以一键集成到 vue-cli 3.x 创建项目中。...等非页面相关文件 选择 不输出 project.config.json 选择 app.wxss 输出配置 选择 输出默认标签样式 选择是否自动构建依赖包 根据自己使用工具选择 npm 或 yarn...入口文件 入口文件就是我们刚才输入 main.mp.ts ,位置 src 目录下,根据自己创建项目时所安装进行修改 例如我创建时使用了 router 和 vuex 这些需要在入口文件引入,所以也需要在...完成上面步骤项目大致是可以跑起来了,但是 Kbone 是不支持 scoped 样式,所以项目中用到 scoped 样式地方需要自己再改一,这里就不细说了。

    1.2K20

    一份超级详细Vue-cli3.0使用教程

    前言 vue-cli 2.X时候,也写过一篇类似的文章,八月份时候vue-cli已经更新到了3.X,新版本脚手架,功能灰常强大,试用过后非常喜欢,写篇教程来帮助各位踩一坑。...n stable // 就遇到了 安装vue-cli: npm install -g @vue/cli // 安装cli3.x vue --version // 查询版本是否为3.x 如果cli3...每次选择手动配置之后,会询问你是否保存配置,也就是图片中koro选项,这样以后我们进行创建项目的时候只需使用原先配置就可以了,而不用再进行配置。 3....是否使用路由`history`模式: 这里建议选No,这样打包出来丢到服务器上可以直接使用了,后期要用的话,也可以自己再开起来。 选yes的话需要服务器那边再进行设置。...选择什么时候进行代码规则检测: 建议选保存就检测,等到commit时候,问题可能都已经积累很多了。 之前写了篇VsCode保存时自动修复Eslint错误推荐一。 ?

    84720

    vue 3.0新特性

    为了降低复杂性,对复杂性进行隔离,开发团队将一些内部功能拆分为了多个单独包。例如,observer 模块将成为一个单独包,拥有自己对外 API 和自己测试用例。...更精准变动通知:举个例子: 2.x 系列中,通过 Vue.set 强制添加一个新属性,将导致所有依赖于这个对象 watch 函数都会被执行一次;而在 3.x 中,只有依赖于这个具体属性 watch...(build) 进行发布,不过这个单独版本还是会有 Vue 2.x 变动探测方面所存在问题,所以它其实并不是一个完全兼容 3.x 一个版本。...构建过程中,资源链接将会自动注入其中。...pwa: { workboxPluginMode: 'InjectManifest', workboxOptions: { // swSrc 中 InjectManifest 模式是必填

    92930

    Vue安装及环境配置、开发工具

    配置默认安装目录和缓存日志目录 说明:这里环境配置主要配置是npm安装全局模块所在路径,以及缓存cache路径,之所以要配置,是因为以后执行类似:npm install express [-...node安装路径,记得改成你们自己路径 “电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”,进入环境变量对话框 1、【系统变量】新建【NODE_PATH】,此处设置第三方依赖包安装目录...---- 三、安装vue-cli 3.x 1、卸载旧版本 卸载2.x版本 npm uninstall vue-cli -g 卸载3.x版本 npm uninstall @vue/cli -g 2、安装新版本...选择手动配置,根据自己需要选择,敲空格键配合方向键进行选择。...五、vue项目结构 1、build:构建脚本目录 1)build.js ==> 生产环境构建脚本; 2)check-versions.js ==> 检查npm,node.js版本; 3)utils.js

    1K10

    vue环境安装与配置(Linux安装常用开发工具)

    配置默认安装目录和缓存日志目录 说明:这里环境配置主要配置是npm安装全局模块所在路径,以及缓存cache路径,之所以要配置,是因为以后执行类似:npm install express [-...node安装路径,记得改成你们自己路径 “电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”,进入环境变量对话框 1、【系统变量】新建【NODE_PATH】,此处设置第三方依赖包安装目录...三、安装vue-cli 3.x 1、卸载旧版本 卸载2.x版本 npm uninstall vue-cli -g 卸载3.x版本 npm uninstall @vue/cli -g 2、安装新版本 npm...选择手动配置,根据自己需要选择,敲空格键配合方向键进行选择。...五、vue项目结构 1、build:构建脚本目录 1)build.js ==> 生产环境构建脚本; 2)check-versions.js ==> 检查npm,node.js版本; 3)utils.js

    77010

    使用 Vue 脚手架搭建项目

    /cli@3.2.1 -g 为了对比 3.x 和 2.x 项目创建上区别,执行下面命令: npm install @vue/cli-init@3.2.0 -g 这样,我们可以通过 vue init...这里 author 会自动读取以前全局配置 gitconfig 文件信息。...现在项目文件夹结构是这样: image.png 跑一项目看看: npm run dev image.png 2) 3.x 版本 创建以 vuecli3test 命名项目文件夹: vue create...vuecli3test 进行项目配置: image.png 现在项目文件夹结构是这样: image.png 和 vue-cli 2 进行对比: image.png 可以发现,相比 2.x 版本...跑一项目看看: npm run serve vue-cli 3.x 为我们提供了可视化配置方式,可以通过下面的方式启动配置服务器: vue ui 之后导入项目文件夹,即可进入该项目对应配置界面 image.png

    1.1K10

    Tomcat下部署vue项目

    1.项目发布后通常有两种访问方式, 第一种: IP+端口直接访问方式, http://192.168.1.107:8080/ 第二种:IP+端口+项目名, http://192.168.1.107...步骤: 1.首先创建 WEB-INF 文件,文件夹中创建 web.xml 文件: 因为是 history 模式, 要防止路由刷新变成 404 错误,这需要让 tomcat 都定位到首页,也就是 index.html...vue history 模式项目,但是不能每次打包去手动添加和更改新建WEB-INF文件夹吧,遇到过设置不打包文件 WEB-INF 文件时配置未生效,导致 WEB-INF web.xml...tomcat vue history 模式 项目最终目录如下图 6.注意 vue-cli 3.x vue-cli 打包配置还需要设置以下内容: module.exports = { publicPath...,所以自己写了一篇关于 tomcat vue history 模式,希望能帮到大家,欢迎大家一起交流。

    3.3K20

    Vue-CLI脚手架基本使用和Vue2项目结构及路由

    vue --vuesion 解决windows PowerShell不识别Vue命令问题 默认情况PowerShell中执行vue --version命令会提示如下错误信息: 解决方案如下:...以管理员身份允许PowerShell 执行 set-ExecutionPolicy RemoteSigned命令 输入字符Y,回车即可 创建项目 vue-cli 提供了创建项目的两种方式: # 基于...命令行 方式创建vue项目 vue create 项目名称 # 基于 可视化面板 创建vue项目 vue ui 可视化面板创建方式不做描述,记录一如何用命令行方式创建vue项目: 步骤1 终端下运行...$mount('#app') //3.2把App根组件渲染到$mount函数指定el区域中 vue2项目中使用路由 vue2项目中,只能安装并使用3.x版本vue-router 版本...}) export default router //4.向外共享路由对象 3.x版本路由创建路由模块 步骤1:vue2项目中安装3.x版本路由: npm i vue-router@3.4.0

    1.3K20

    :第一章 - 一些基础概念

    传统前端开发中,为了完成某个任务,我们需要使用 JS/Jquery 获取到元素DOM元素,随后对获取到DOM元素进行操作。.../npm/vue@2.5.17/dist/vue.js">   3.2、使用 Vue-cli 构建单页应用(需要先在电脑中安装好node.js环境才可使用)   //1、全局安装Vue-Cli... 2.x 版本,最新 vue-cli 3.x 版本中,包名已经发生了改变,你需要卸载原有的包之后重新安装 vue-cli 才可以,同时也可以使用页面的形式配置项目了。...):MVVM核心是ViewModel,它提供了对于Model和ViewModel双向数据绑定,通过ViewModel连接View和Model,确保视图与数据一致性,而这个过程是框架自动完成,无需手动干预...图片版权说明:由Ugaya40 - 自己作品,CC BY-SA 3.0,链接 三、总结   这一章我们主要学习了一些 vue 涉及到一些概念,在后面的学习中,也会逐渐往本篇文章中里面添加用到知识

    45430

    前端使用Vue框架解决跨域问题「建议收藏」

    ; 本人用是脚手架vue-cli 3.x版本Vue框架;导致没有了vue-cli 2.x版本build和config文件夹; 项目目录如下:...; 很多前端朋友们就会纳闷,原先在vue-cli 2.x版本config文件夹,中配置服务器代理;现在没有了config文件,怎么配置了?...对于vue-cli 3.x版本配置服务器代理,可以根目录下建立一个vue.config.js文件;(一定要记住是根目录); 建好以后文件目录如下: vue.config.js空文件中,自行添加如下代码...: 注意如下:target对应属性值为你准备向后端服务器发送请求主机+端口,含义为:相当于把前端发送请求主机+端口自动替换成挂载主机和端口,这样前后端主机端口都一一就不会存在跨域问题; ws...发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    71920

    (Vue全家桶)Vue-cli

    Vue-cli Vue-cli是vue官方出品快速构建单页应用脚手架 安装vue-cli 安装vue-cli前提是你已经安装了npm,安装npm你可以直接下载node安装包进行安装。...实际开发中,一般我们都会使用webpack这个模板,那我们这里也安装这个模板,命令行输入以下命令: vue init webpack vuecliTest 输入命令后,会询问我们几个简单选项,我们根据自己需要进行填写就可以了...2、npm install 安装我们项目依赖包,也就是安装package.json里包,如果你网速不好,你也可以使用cnpm来安装。 3、npm run dev 开发模式运行我们程序。...给我们自动构建了开发用服务器环境和在浏览器中打开,并实时监视我们代码更改,即时呈现给我们。 ? Vue启动.png 目录结构 ?...目录结构.png npm run build 命令 npm run build命令后,vue-cli自动进行项目发布打包当前目录下会有dis目录,把dis目录下文件放到服务器就可以了

    1.1K30

    前端开发3年了,竟然不知道什么是 Vue 脚手架?(上)

    cnpm 与 npm 使用命令是一样,只是执行命令时将 npm 改为 cnpm。...二、Vue CLI 2.x 初始化项目 vue-cli 3 已经发布一段时间了,现在安装脚手架,都会安装 Vue-cli 3.x 版本,如果我们想要使用 vue-cli 2.x 版本时,需要拉去 vue-cli...--inline 运行本地命令 --progress 进度 --config build/webpack.dev.conf.js 配置执行脚本入口文件 所以我们执行 npm run dev 时候,其实执行是...四、项目其他文件介绍 整体项目目录结构很简单,如图所示: build - 存放执行脚本入口 config - 文件夹内 index.js ,更多dev、build配置 node_moudles...render: h => h(App) 下篇文章 -- 介绍 vue-cli 3.x 搭建项目

    69930

    vue3+element-plus+router+vuex+axios从零开始搭建(2)

    .env+vue.config.js 这一章主要环境相关配置 开发环境与线上环境配置 下面是vue cli 配置模式和环境变量: 模式和环境变量 vue-cli 3.0x与vue-cli 2.0x最主要区别是项目结构目录精简化...是两个特殊变量,代码中始终可用 vue3.0 .env 文件配置全局环境变量 根目录下创建以下文件 .env 全局默认,任何环境都加载合并 .env.development 开发环境配置文件...现在我们如何在项目中判断当前环境呢?....local 也可以加在指定模式环境文件上,比如 .env.development.local 将会在 development 模式被载入,且被 git 忽略。...vue.config.js配置 2.x里面webpack相关配置项直接在项目的build/webpack.base.conf.js里面配置,而3.x完全vue.config.js中配置 创建vue.config.js

    1.4K40

    vue.js 三种方式安装(vue-cli)

    大家好,又见面了,是你们朋友全栈君。 Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动 web 界面的渐进式框架。...3)安装vue-cli2 脚手架构建工具(必须在全局中进行安装) 命令行中运行命令 npm install -g vue-cli ,然后等待安装完成。...首先我们要选择存放项目的位置,然后再用命令行cd到项目的目录中,在这里,选择c盘创建新目录(NodeTest 目录),用cd 将目录切到该目录下,如下图: NodeTest 目录下,命令行中运行命令...其中firstApp是整个项目文件夹名称,这个文件夹会自动生成在你指定目录中(实例中,会在NodeTest 目录生成该文件夹),如下图: 若我们在编辑器中已经手动创建了这个项目存放文件夹cd到项目中...:vue init webpack;初始化一即可,同时还会加载webpack所依赖包: 是否是本目录下进行创建 输入命令后,会询问我们几个简单选项,我们根据自己需要进行填写就可以了。

    1.6K20

    Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(上篇——纯前端多页面)

    Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(上篇——纯前端多页面) @(HTML/JS) 一般来说,使用vue做成单页应用比较好,但特殊情况,需要使用多页面也有另外好处...安装vue-cli:npm i -g vue-cli 初始化项目:vue init 这里选择最简单template:webpack-simple...devServer控制webpack自带热更新服务器行为,例如修改一端口。使用npm脚本运行:webpack-dev-server --open --hot。...环境变量设置,使用是cross-env工具,npm脚本中运行设置cross-env NODE_ENV=production >App.vue和index.html 这两个就是很基本vue功能了...至此,就可以把项目跑起来了,dev模式,webpack每次自动打包都会生成page1和page2。

    1.4K20

    三年项目升级Vue3踩坑经历

    第三方组件升级依赖其官方是否支持Vue3,如果不支持,需要寻找替代品或者自己造轮子。这里简单列举一我们升级遇到到一些第三方组件。...vuedraggable升级到4.x版本,参考官网进行修改。 qrcode.vue升级到3.x版本,参考官网进行修改(升级后样式会发生一定变化,需要留意)。...handsontableVue3版本不支持免费使用,我们替换成了ag-grid-vue3并变更了一代码逻辑。 5.升级团队自己维护vue组件。...大部分APIVue3中仍然可用,只有部分不兼容变更,参照官方文档即可。 第三方组件升级最为繁琐,依赖第三方组件是否支持Vue3,不支持就需要自己造轮子。...新语法setup接下来写新组件时候再尝试使用,老组件功能升级是可顺带修改,以保证项目代码风格统一。 测试工作十分重要,升级过程中可以逐步开始测试。

    2.6K20
    领券