vue与node.js项目前后端连载

在全栈开发过程中，前后端分别采用vue-cli脚手架与node.js开发。开发时我们首先要启动node.js后台项目，再启动vue项目，这样十分麻烦。

解决方案

项目目录

目录.png

client文件夹为前端部分，其余为node后端部分，二者均有一个package.json文件。
细心点会发现还有package-lock.json文件，这个貌似和package.json文件很像啊。

其实package-lock就是锁定安装时的包版本号，需要上传到git上，以保证其他人在install时候，大家的依赖版本相同。package.json文件只能锁定大版本，即版本号的第一位，不能锁定后面的小版本，你每次npm install时候拉取的该大版本下面最新的版本，相信不少人踩过类似的坑。
一般为了稳定性考虑我们不能随意升级依赖包，因为如果换包导致兼容性bug出现很难排查，所以package-lock.json就是来解决包锁定不升级问题的。
那我们想升级package-locak.json里面的库包，该如何操作呢？
执行如下命令即可，@后面为包的版本号

npm install [email protected]

介绍完了前后端项目的目录，接下来是前后端连载的方案：

1.安装concurrently模块

确保当前路径在node项目的package.json同目录下，执行

cnpm install concurrently

2.配置vue项目的package.json

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "start": "npm run serve"`
  },

修改package.json文件如上，添加了 "start": "npm run serve"

3.配置node项目的package.json

"scripts": {
    "client-install": "npm install --prefix client",
    "client": "npm start --prefix client",
    "start": "node server.js",
    "server": "nodemon server.js",
    "dev": "concurrently \"npm run server\" \"npm run client\""
  }

修改package.json文件如上，关键在于"dev": "concurrently \"npm run server\" \"npm run client\""。
[nodemon用来监视node.js应用程序中的任何更改并自动重启服务,非常适合用在开发环境中]

4.切换至node项目

执行
npm run dev
此时即可同时启动后端与前端项目

若报错，可删除node_module文件夹重新执行cnpm install
快速删除node_module文件夹方法：

安装（推荐全局安装）：
cnpm install -g rimraf
使用：

cd xxx [the folder which includes node_modules folder]
rimraf node_modules