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
