vue+node 全栈开发 --- 同时运行vue和node

背景说明

node 后台开发时，本身是作为集成一个 tomcat+java 功能的后台，直接运行即可。

vue 开发与 node 开发同时进行全栈开发时，需要打开运行两个项目，比较麻烦。

配置步骤

说明：此一系列步骤在简单的 vue 以及 node 开发使用之后可以更好理解一些。

node版本：10.15.1

@vue/cli：4.0.5

简要说明

在已有的 node 后台项目中新建一个 client 文件夹存放前端项目，使用 concurrently 插件来运行命令，使用 nodemon 监控重启 node 后台。

目录结构大概如下：

┝ node_backend // node后台
 ─ bin
 ─ public
 ─ routes
 ─ views
 ─ app.js
 ─ package.json
 ─ client // 存放前端项目
  ┗ public
  ┗ src
  ┗ babel.config.js
  ┗ package.json
  ┗ vue.config.js

开始配置......

安装必要的插件

在 node_backend 下安装：

npm install concurrently # 必须安装
npm install nodemon # 可选安装

npm install

分别在 node_backend 以及 client 文件夹下执行 npm install 命令

client 前端的package.json文件

client 文件夹下

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "start": "npm run serve"  // npm start命令即可运行前端项目
  },

node 后台的package.json文件

node_backend 文件夹下

安装了nodemon插件

配置说明：

npm run server ==> nodemon ./bin/www ==> 运行node后台

npm run client ==> 在 client 文件夹下运行npm start ==> 在 client 文件夹下运行npm run serve ==> 运行vue前台

使用concurrently使得以上两个命令同时执行

"scripts": {
    "client": "npm start --prefix client",
    "start": "node ./bin/www",
    "server": "nodemon ./bin/www",
    "dev": "concurrently \"npm run server\" \"npm run client\""
  },

没安装 nodemon 插件

"scripts": {
    "client": "npm start --prefix client",
    "start": "node ./bin/www",
    "dev": "concurrently \"npm start\" \"npm run client\""
  },

使用

在 node_backend 文件夹下 运行npm run dev 即可

拓展使用---多 vue + 一 node

可以在 node_backend 文件夹下 放置多个前端项目，只需要配置 node_backend 文件夹下 的package.json文件即可。

举个栗子：

┝ node_backend // node后台
 ─ ……
 ─ app.js
 ─ package.json
 ─ 1_client // 前端项目-1
  ┗ ……
 ─ 2_client // 前端项目-2
  ┗ ……
  

配置node_backend 的 package.json

"scripts": {
    "1_client": "npm start --prefix 1_client", # 运行前端项目-1
    "2_client": "npm start --prefix 2_client", # 运行前端项目-2
    "start": "node ./bin/www", # 运行 node 后台
    "1_client_dev": "concurrently \"npm start\" \"npm run 1_client\"", # 后台 + 前端项目-1
    "2_client_dev": "concurrently \"npm start\" \"npm run 2_client\"" # 后台 + 前端项目-2
  },

运行

• 后台 + 前端项目-1 npm run 1_client_dev

• 后台 + 前端项目-2 npm run 2_client_dev