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