concurrently第三方库 —— 一条命令同时启动后端服务器和前端Vue项目(开发期间小技巧)

在写项目的过程中发现了一个很好用的第三方包concurrently,可以通过一条命令npm run dev同时启动后端服务器与前端Vue项目、在开发期间非常方便。

注意但是最好先把前端项目的文件夹放到后端的文件夹中!!(开发完再移出,并删除配置即可)
在这里插入图片描述

1.执行npm i concurrently进行安装

2.在前端项目的package.jsonscripts中添加"start": "npm run serve"

"scripts": {
    "start": "npm run serve"
  },

3.在后端项目的package.jsonscripts中添加如下配置,client是我前端文件夹的名字

"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\""
  },

4.最后执行npm run dev即可都启动。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
可以通过以下步骤来实现在前端开发时同时使用mock接口和服务器接口: 1. 安装http-proxy-middleware和json-server,分别用于代理服务器接口和mock接口。 ``` npm install http-proxy-middleware json-server --save-dev ``` 2. 在package.json中添加scripts,用于启动mock服务和代理服务器接口。 ```json "scripts": { "start": "node server.js", "mock": "json-server --watch db.json", "dev": "concurrently \"npm run mock\" \"npm start\"" } ``` 3. 创建一个server.js文件,用于代理服务器接口。 ```javascript const express = require('express'); const { createProxyMiddleware } = require('http-proxy-middleware'); const app = express(); app.use('/api', createProxyMiddleware({ target: 'http://localhost:3000', // 服务器接口地址 changeOrigin: true, })); app.listen(4000, () => { console.log('Proxy server listening on port 4000'); }); ``` 4. 创建一个db.json文件,用于存储mock数据。 ```json { "users": [ { "id": 1, "name": "Alice" }, { "id": 2, "name": "Bob" } ] } ``` 5. 在前端代码中使用http-proxy-middleware代理服务器接口和mock接口。 ```javascript import { createProxyMiddleware } from 'http-proxy-middleware'; const apiProxy = createProxyMiddleware('/api', { target: 'http://localhost:4000' }); const mockProxy = createProxyMiddleware('/api', { target: 'http://localhost:3000' }); // 在开发环境中使用mock接口,生产环境中使用服务器接口 const useMock = process.env.NODE_ENV === 'development'; const proxy = useMock ? mockProxy : apiProxy; const app = express(); app.use(proxy); // 使用代理 app.listen(3001, () => { console.log('App listening on port 3001'); }); ``` 通过以上步骤,就可以在前端开发时同时使用mock接口和服务器接口了。在开发环境中,可以使用mock接口进行快速开发和测试,而在生产环境中,则使用真实的服务器接口。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

焦妮敲代码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值