专栏首页thinkphp+vue如何在启动Vue项目的同时跑 node.js脚本
原创

如何在启动Vue项目的同时跑 node.js脚本

编写copyFile.js 脚本实现,将文件夹内所有文件和子文件夹拷贝到另外的文件夹中 注意 copyFile.js 属于后端脚本,需要执行 node copyFile.js 运行

  • 引入node环境中自带的两个模块 写文件模块和读文件模块 const fs = require('fs'); const path = require('path'); 复制代码
  • 以下两段代码是一个整体 :使用方法是直接调用 copyFolde(源文件相对路径,复制目标的相对路径) 函数
    • 将源文件拷贝到目标文件: //!将srcPath路径的文件复制到tarPath cd为回调 var copyFile = function(srcPath, tarPath, cb) {  var rs = fs.createReadStream(srcPath);  rs.on('error', function(err) {    if (err) {      console.log('read error', srcPath);   }    cb && cb(err); })  var ws = fs.createWriteStream(tarPath);  ws.on('error', function(err) {    if (err) {      console.log('write error', tarPath);   }    cb && cb(err); })  ws.on('close', function(ex) {    cb && cb(ex); })  rs.pipe(ws); } ​ 复制代码
    • 将源文件夹下所有的文件和子文件夹,拷贝到目标文件夹下 //! 将srcDir文件下的文件、文件夹递归的复制到tarDir下   cd为回调 var copyFolder = function(srcDir, tarDir, cb) {  fs.readdir(srcDir, function(err, files) {    var count = 0;    var checkEnd = function() {      ++count == files.length && cb && cb();   }    if (err) {      checkEnd();      return;   }    files.forEach(function(file) {      var srcPath = path.join(srcDir, file);      var tarPath = path.join(tarDir, file);      fs.stat(srcPath, function(err, stats) {        if (stats.isDirectory()) {          console.log('mkdir', tarPath);          fs.mkdir(tarPath, function(err) {            if (err) {              console.log(err);              return;           }            copyFolder(srcPath, tarPath, checkEnd);         });       } else {          copyFile(srcPath, tarPath, checkEnd);       }     });   });    //为空时直接回调    files.length === 0 && cb && cb(); }); } ​ 复制代码
  • copyFile.js是基于node.js编写的后端脚本,哪问题来了,如何将后端脚本在Vue项目中运行,众所周知在Vue中启动项目是执行 npm run xxx 而copyFile.js的命令是 node copyFile.js
    • 方案一:在同一个项目中打开两个命令行窗口 分别执行 npm run xxxnode copyFile.js 效果作用在同一个项目中
  • 打开两个窗口又是执行两个命令,方案一太麻烦了。有没有什么方法只需要执行 npm run xxx 命令 便可达到方案一的效果
    • npm run xxx:会执行pakeage.json中在scripts中写的脚本命令,这些脚本就是node_modules/.bin中的文件名
    • 方案二:设置启动多条命令 在package.json文件中配置 如果命令中包括空格,则需要使用()将命令包含起来。此外&&&的作用也不同。 "scripts": {    "serve": "(node copyFile.js) && (vue-cli-service serve)",    "start": "webpack & (ng serve)" }, 复制代码
      • ➊ 命令先后顺利执行。先执行node copyFile.js,该命令执行完毕后再执行vue-cli-service serve
      • ➋ 命令一并执行。同时执行webpack以及ng serve两个命令

结语

创作不易,如果对大家有所帮助,希望大家点赞支持,有什么问题也可以在评论区里讨论😄~ 如果你觉得这篇文章对你有点用的话,麻烦请给我们的开源项目点点star:http://github.crmeb.net/u/defu 不胜感激 ! 来自 “开源独尊 ” ,链接: https://ym.baisou.ltd/post/825.html

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue CLI脚手架安装全过程及遇到的问题解决

    今天使用 Vue 官方的一个脚手架工具 Vue CLI 创建了一个项目,顺便把安装过程和遇到的问题整理了一下。效果如下图:

    德顺
  • vue.js下集成腾讯云实时音视频TRTC(step by step )

    本文适用于vue.js新人,因为作者也是刚刚接触vue.js,也只记录作者学习过程。

    美女视频
  • Vite ❤ Electron——基于Vite搭建Electron+Vue3的开发环境【一】

    目前社区两大Vue+Electron的脚手架:electron-vue和vue-cli-plugin-electron-builder,

    liulun
  • 使用 Vue 脚手架搭建项目

    vue-cli 也是一个 npm 包,可以帮助我们快速搭建起 vue 项目的脚手架。

    Chor
  • 二、VueJs 填坑日记之基础项目构建

    在上一篇文章中,大致介绍了一下本系列博文以及学习vuejs我们需要了解的一些概念,希望大家认真阅读,所谓知己知彼,百战百胜,学习也一样,工欲善其事,必先利其器,...

    I Tech You_我教你
  • ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目

      这几年前端的发展速度就像坐上了火箭,各种的框架一个接一个的出现,需要学习的东西越来越多,分工也越来越细,作为一个 .NET Web 程序猿,多了解了解行业...

    程序员宇说
  • 探索 PHP 与 Vue 通用直出模板方案

    我们通常说的“页面直出”,其实就是服务端渲染(SSR, Server-Side Render)。最初的 JS SPA 方案有个常见的问题,就是脚本没有加载执行完...

    贤羽
  • 前端开发:Mac电脑安装vue.js的步骤

    最近转行前端开发,进入前端开发的第一件事就是安装开发环境,前端开发的环境有很多个,这里只来介绍Visual Studio Code开发运行vue的方法,然后再介...

    三掌柜
  • VueCli脚手架(一)什么是vue cli脚手架,Vue Cli 安装教程,包括node.js 的安装,vue项目结构的介绍

    以上做的其实就是安装了node.js 的环境,这个就相当于前端的服务器,配置了淘宝镜像,让我们下载东西快一点。还有就是配置了安装文件,也就是我们下载的东西要放到...

    一天不写程序难受
  • 如何运行vue项目(维护他人的项目)

    前提: 首先,这个教程主要针对vue小白,并且不知道安装node.js环境的。言归正传,下面开始教程:在维护项目之前,需要把所有的环境搭建好,这里我就不多说了...

    王小婷
  • Vue开发环境搭建全过程,一步一个坑

    Vue这里就不多作介绍了,首先我们要安装好整个开发环境,其实Windows和Mac的整个过程基本一样

    一墨编程学习
  • 超简单入门Vuex小示例

    本文转载自掘金上面的一篇博客,原文地址为: 超简单入门Vuex小示例,项目源代码我已经托管到github上面,源代码地址为:https://github.com...

    ccf19881030
  • Electron+Vue搭建跨平台桌面应用

    Electron是一个基于Chromium和 Node.js的跨平台的桌面应用开发框架,可以让我们用html css js的技术开发跨平台桌面应用软件,也是当下...

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

    用户1258909
  • 适合 JS 新手学习的开源项目——在 GitHub 学编程

    这里是 HelloGitHub 的《GitHub 上适合新手的开源项目》系列的最后一篇,系列文章:

    HelloGitHub
  • Spring Boot + Vue 如此强大?竟可以开发基于 C/S 架构的应用

    虽然 B/S 是目前开发的主流,但是 C/S 仍然有很大的市场需求。受限于浏览器的沙盒限制,网页应用无法满足某些场景下的使用需求,而桌面应用可以读写本地文件、调...

    Bug开发工程师
  • Spring Boot + Vue 如此强大?

    虽然 B/S 是目前开发的主流,但是 C/S 仍然有很大的市场需求。受限于浏览器的沙盒限制,网页应用无法满足某些场景下的使用需求,而桌面应用可以读写本地文件、调...

    Leetcode名企之路
  • 创建vue项目的几种方式

    最近一段时间在学习vuejs和element-ui、iview-ui这些前端知识,在创建vuejs项目时发现有几种不同的方法:

    ccf19881030
  • Spring Boot + Vue 也可以开发 C/S 架构的应用,快来试试!

    本文地址:segmentfault.com/a/1190000021376934

    江南一点雨

扫码关注云+社区

领取腾讯云代金券