前后端连载concurrently使用遇到的坑和经验记录koa2搭建的后端服务及vueadmin前端服务之间不同目录下连载

虽然之前的项目中有使用过前后端连载&＃xff0c;但是由于依赖的更新以及开发语言的版本更替。甚至是vue-cli的更新&＃xff0c;导致之前写的文章&＃xff0c;参考价值仅限于原理与模板&＃xff0c;具体的代码需要根据项目来决定。

concurrently依赖

npm i concurrently -D

在项目中install concurrenly这个依赖模块&＃xff0c;不再赘述。

根据前后端所在的文件目录进行package.json文件的改造。

这个项目目录下第一个子文件夹我存放的是前端的服务&＃xff0c;这个子文件夹下用koa2搭的服务器及应用框架在IT_admin_system文件夹下。因此这个项目有两个package.json文件&＃xff0c;分别管理前端服务以及后端服务。针对这个项目 连载需要在前端项目的package.json改造。

关于concurrently这个依赖的作用&＃xff0c;浅显来看 他就是同时启用两条命令。

比如有两个服务要开。

"start": "concurrently \"command1 arg\" \"command2 arg\""

当然这个start也可以是dev&＃xff0c;这就要看项目的架构及所用的vue框架了。

以我的项目为例&＃xff0c;没有改造前的package中的scripts&＃xff1a;

"scripts": {"dev": "vue-cli-service serve","build:prod": "vue-cli-service build","build:stage": "vue-cli-service build --mode staging","preview": "node build/index.js --preview","svgo": "svgo -f src/icons/svg --config&＃61;src/icons/svgo.yml","lint": "eslint --ext .js,.vue src","test:unit": "jest --clearCache && vue-cli-service test:unit","test:ci": "npm run lint && npm run test:unit"},


由于我采用的是vue-cli脚手架搭建的项目&＃xff0c;值得注意的是dev&＃xff0c;也就是这个服务的启动方式是通过npm run dev来完成的。

再看看后端服务改造前的scripts&＃xff1a;

"scripts": {"start": "node bin/www","dev": "./node_modules/.bin/nodemon bin/www","prd": "pm2 start bin/www","test": "echo \"Error: no test specified\" && exit 1"},


同样的 后端的服务也是npm run dev来启动。

改造后&＃xff1a;

"scripts": {"server":"npm start --prefix IT_admin_system", // 可删"lulu": "vue-cli-service serve","dev":"concurrently \"npm run lulu\" \"npm start --prefix IT_admin_system\"","build:prod": "vue-cli-service build","build:stage": "vue-cli-service build --mode staging","preview": "node build/index.js --preview","svgo": "svgo -f src/icons/svg --config&＃61;src/icons/svgo.yml","lint": "eslint --ext .js,.vue src","test:unit": "jest --clearCache && vue-cli-service test:unit","test:ci": "npm run lint && npm run test:unit"},


我在scripts中重新定义了一个server&＃xff0c;让他充当后端服务启动的命令“变量”&＃xff0c;事实证明 这是脱裤子放屁行为。

我们只需要搞懂 如果我的服务不在同一个目录下 我应该怎么访问 查阅文档后发现 npm start --prefix 文件夹名就可以找到这个文件夹下的scripts模块下的start&＃xff0c;并且运行。

所以我们现在在前端终端中输入npm start --prefix IT_admin_system可以把后端的服务启动了。

那么顺着这个思路&＃xff0c;是不是

"concurrently \"npm run dev\" \"npm start --prefix IT_admin_system\""


就可以了呢&＃xff1f;

然而这样做的后果是 不断地进行循环&＃xff0c;所以需要一个变量接一下前端服务地启动命令。至于变量名是什么&＃xff0c;那就看各位地喜好了
前端服务改&＃xff1a;

"lulu": "vue-cli-service serve","dev":"concurrently \"npm run lulu\" \"npm start --prefix IT_admin_system\"",


后端改&＃xff1a;

"start": "./node_modules/.bin/nodemon node bin/www",


最终前后端连载成功。

写在后面

一味跟着模板走还是不如把原理了解之后找到解决方法&＃xff0c;依赖的文档&＃xff1a;https://www.npmjs.com/package/concurrently 供以后忘了回顾。