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

    64320

    使用 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错误推荐一下。 ?

    86620

    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 模式下是必填的

    94330

    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

    81110

    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

    1.2K10

    使用 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.4K20

    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.4K20

    :第一章 - 一些基础概念

    在传统的前端开发中,为了完成某个任务,我们需要使用 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 涉及到的一些概念,在后面的学习中,也会逐渐往本篇文章中里面添加用到的知识

    45830

    前端使用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...如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    72520

    前端开发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 搭建项目

    71330

    (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

    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.5K40

    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组件。...大部分API在Vue3中仍然可用,只有部分不兼容的变更,参照官方文档即可。 第三方组件的升级最为繁琐,依赖第三方组件是否支持Vue3,不支持就需要自己造轮子。...新语法如setup在接下来写新组件的时候再尝试使用,老组件在功能升级是可顺带修改,以保证项目代码风格统一。 测试工作十分重要,升级过程中可以逐步开始测试。

    2.7K20
    领券