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

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

concurrently依赖

npm i concurrently -D

在项目中install concurrenly这个依赖模块，不再赘述。

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

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

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

比如有两个服务要开。

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

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

以我的项目为例，没有改造前的package中的scripts：

  "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=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脚手架搭建的项目，值得注意的是dev，也就是这个服务的启动方式是通过npm run dev来完成的。

再看看后端服务改造前的scripts：

  "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来启动。

改造后：

  "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=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，让他充当后端服务启动的命令“变量”，事实证明 这是脱裤子放屁行为。

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

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

那么顺着这个思路，是不是

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

就可以了呢？

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

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

后端改：

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

最终前后端连载成功。

写在后面

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