首页 > 编程语言> 文章详细

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

2020-05-09 17:53:16 阅读：419 来源： 互联网

标签：node npm vue run start 全栈 client

背景说明

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

标签：node,npm,vue,run,start,全栈,client
来源： https://www.cnblogs.com/fengzzi/p/12859151.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9