当前位置: 首页 > news >正文

使用node搭建服务器,前端自己写接口,将vue或react打包后生成的dist目录在本地运行

使用node.js+express或者使用node.js+pm2搭建服务器,将vue或react打包后生成的dist目录在本地运行

vue项目打包后生成的dist目录如果直接在本地打开index.html,在浏览器中会报错,无法运行起来。
通常我是放到后端搭建的服务上面去运行,当时前端自己也可以是node,nuxt搭建服务器,写接口等等
如果想在本地运行,我们可以借助node.js+express搭建一个服务器,将打包后的文件部署在服务器上,就可以运行起来了。

安装

npm install express -g
npm install express-generator -g
npm install pm2 -g

或者一起安装

npm i express express-generator pm2 -g

创建

安装好之后创建项目
express + 自定义名称
在这里插入图片描述

安装依赖

   cd serve 进入项目npm install 下载依赖npm start  启动项目

看到下面的图证明服务已经开启,端口号的什么的自己看代码去更改(默认是3000,在/bin/www文件中)
在这里插入图片描述
在浏览器打开 http://localhost:3000/# 看到到下面的图证明成功了
在这里插入图片描述

使用pm2

上面运行服务也可以,不是长时间不用会自动关闭,如果想部署到云服务器上面推荐使用pm2 上面我已经让你安装过了!
运行命令为:

pm2 start ./bin/www  
//或者
pm2 start app.js

pm2官网,这里不多赘述
常用pm2命令:
pm2 start
pm2 list
pm2 kill
pm2 stop app_name|app_id|all
pm2 delete app_name|app_id|all
pm2 restart/reload app_name|app_id|all

放包

将前端打包的好的dist文件夹里面的所有内容复制到刚才创建项目的public文件夹里
你在去浏览器上面刷新页面,会看到你打包的页面已经显示出来了
在这里插入图片描述

下面告诉你如何用node写接口的,下面这个图应该会很清晰

在这里插入图片描述

例子

user下查看所有用户的接口(最简单的接口)
在这里插入图片描述
前端调接口拿到数据库中的数据
在这里插入图片描述

相关文章:

使用node搭建服务器,前端自己写接口,将vue或react打包后生成的dist目录在本地运行

使用node.jsexpress或者使用node.jspm2搭建服务器,将vue或react打包后生成的dist目录在本地运行 vue项目打包后生成的dist目录如果直接在本地打开index.html,在浏览器中会报错,无法运行起来。 通常我是放到后端搭建的服务上面去运行,当时前端…...

一篇文章搞懂如何使用JDBC操作数据库,还有JDBC进阶操作

目录 简介什么是JDBC如何使用JDBC1、获取连接2、操作数据3、关闭连接,释放资源使用技巧 查询操作创建表,插入模拟数据使用Java查询数据的数据SQL注入问题使用PreparedStatement查询 更新操作插入插入并获取主键更新删除 JDBC事务JDBC的批量操作JDBC连接池…...

9.3.2.1网络原理(UDP)

1.UDP的基本特点:无连接,不可靠传输,面向数据报,全双工. 2.1~1024的端口号有特定的含义,不建议使用.比如21:ftp,22:ssh,80:http,443:https. 3.CRC校验算法:循环冗余校验和,把UDP报中的每个字节都依次进行累加,把累加的结果,放到两个字节的变量中,溢出也无所谓,因为都加了一遍.…...

21、stm32使用LTDC驱动LCD

注:本文基于stm32使用FMC驱动SDRAM(IS42S32800G-6BLI)工程继续开发 本例使用安富莱的H743XIH板子驱动LTDC点亮7寸LCD 硬件接线:RGB888 一、cubemx配置 1、LTDC配置 注意此引脚应于上面的硬件接线图一致 2、配置DMA2D 3、背光引脚和触摸引脚 4、时钟…...

合并两个有序链表

就像一个贪吃蛇将两个链表一一的吃进来 class Solution(object):def mergeTwoLists(self, list1, list2):""":type list1: Optional[ListNode]:type list2: Optional[ListNode]:rtype: Optional[ListNode]"""p ListNode(0)cur pwhile list1 a…...

深入了解Unity的Physics类:一份详细的技术指南(七)(上篇)

前言 Unity的Physics类是Unity物理系统的核心,提供了一套用于处理和控制物理模拟的API。这个类提供了用于控制物理系统的全局属性和方法,以及检测和施加力到游戏对象,处理碰撞和触发器事件等。为了让开发者都能更好理解这个Physics类&#x…...

数据结构与算法-数组(附阿里面试题)

一 面试经典: 给你一个文件里面包含全国人民(14亿)的年龄数据(0~180),现在要你统计每一个年龄 有多少人? 给定机器为 单台2CPU2G内存。不得使用现成的容器,比如map等。&am…...

k8s集群网络插件搭建——————解决集群notready(k8s1.20版本,docker24)

前面已经提到,在初始化 k8s-master 时并没有网络相关配置,所以无法跟 node 节点通信,因此状态都是“NotReady”。但是通过 kubeadm join 加入的 node 节点已经在k8s-master 上可以看到。 那么,这个时候我们该怎么办呢?…...

有血有肉的PPT

1、PPT是Powerpoint缩写 2、引申的含义是Powerpoint Power(力量/能量) Point(观点/要点) 3、用PPT做的文档是讲演稿,讲演的内容要有力度,之所以要去演讲是为了能够影响受众 4、其次演讲稿上的内容要列出要点、表明观点,所以一般P…...

使用C语言实现UDP消息接收

目录 简介:步骤:步骤 1: 创建套接字步骤 2: 接收消息步骤 3: 完成 函数及变量解释总结: 简介: 在网络通信中,UDP(User Datagram Protocol)是一种无连接协议,它提供了一种快速、高效的数据传输方法。本文将向您展示如何使用C语言编…...

图片加水印

基础 基于:https://github.com/chishaxie/BlindWaterMark#blindwatermark 前置 安装python,操作系统为ubuntu 18.04.4 server 说明:python2 不行,已验证不行的版本是2.7.17,建议使用ubuntu 18.04.4 server对应的py…...

Nginx代理接口访问返回404

Nginx代理接口访问返回404 一、背景 因为不同业务系统间有接口调用,存在跨域问题,为了解决同源策略,需要将接口通过nginx去转发,但是配置完后通过postman请求一直存在访问404的问题。 访问地址:https://a.test.com/n…...

湘大 XTU OJ 1097 排序 题解:c++ 函数库的使用 快速排序 归并排序 冒泡排序

一、链接 1097 排序 二、题目 Description N个整数&#xff0c;将其排序输出。 输入 第一行是一个整数K&#xff08;1<K<20&#xff09;&#xff0c;表示有多少个样例&#xff0c;每个样例的第一行是一个整数N&#xff08;1<N<1,000&#xff09;和一个字符X&…...

Stable Diffusion AI绘图教学

课程介绍下载 这门课程将教授学生使用Stable Diffusion AI绘图工具进行数据可视化和图形设计。学生将学习基本的绘图原理、数据分析技巧&#xff0c;以及如何使用Stable Diffusion AI创建高质量的图表和可视化作品。通过实践项目和案例研究&#xff0c;学生将提升绘图技能&…...

39、传输层的任务和协议

从本节内容开始&#xff0c;我们学习TCP/IP模型的传输层的知识。传输层是TCP/IP模型中的重要组成部分&#xff0c;如果没有传输层的处理&#xff0c;那么源主机发送的IP数据包到达目的主机之后&#xff0c;目的主机将不知道这个数据是哪个应用程序的数据&#xff0c;就不能很好…...

系统架构设计专业技能 · 网络规划与设计(三)【系统架构设计师】

系列文章目录 系统架构设计专业技能 网络规划与设计&#xff08;三&#xff09;【系统架构设计师】 系统架构设计专业技能 系统安全分析与设计&#xff08;四&#xff09;【系统架构设计师】 系统架构设计高级技能 软件架构设计&#xff08;一&#xff09;【系统架构设计师…...

使用Matplotlib判断鼠标是否点击在当前线上的详细指南

系列文章目录 文章目录 系列文章目录前言一、导入必要的库二、创建图表和线条三、定义鼠标点击事件处理函数四、显示图表总结前言 Matplotlib是一个强大的绘图库,用于在Python中创建各种类型的图表和可视化。本文将详细介绍如何使用Matplotlib来判断鼠标是否点击在当前线上,…...

http get、post、put

HTTP协议定义了多种请求方法,用于不同的操作。最常见的有 GET、POST 和 PUT。 GET:GET 是最常用的方法,通常用于请求服务器发送某个资源。GET 请求只通过 URL 传送数据,数据信息会附在 URL 之后,以参数的形式附加。由于这种传送方式的限制,GET 请求的数据量较小,且安全性…...

仅使用 CSS 创建打字机动画效果

创建打字机效果比您想象的要容易。虽然实现这种效果的最常见方法是使用 JavaScript&#xff0c;但我们也可以使用纯 CSS 来创建我们的打字机动画。 在本文中&#xff0c;我们将了解如何仅使用 CSS 创建打字机动画效果。它简单、漂亮、容易。我们还将看看使用 CSS 与 JavaScrip…...

pytest fixture 高级使用

一、fixture中调用fixture 举例&#xff1a; 输出&#xff1a; 说明&#xff1a;登录fixture 作为参数传递到登出方法中&#xff0c;登录方法的返回值就可以被登出方法使用 二、在fixture中多参数的传递&#xff08;通过被调用函数传参&#xff09; 举例&#xff1a; 输出&a…...

别再手动维护省市区数据了!Vue项目里用element-china-area-data插件5分钟搞定三级联动

Vue项目中的省市区三级联动&#xff1a;用element-china-area-data插件实现高效开发 每次项目需要集成省市区选择功能时&#xff0c;你是否还在为手动维护行政区划数据而头疼&#xff1f;从数据采集到格式转换&#xff0c;再到定期更新&#xff0c;整个过程既耗时又容易出错。现…...

别再只用plot了!用Matplotlib画函数曲线,这5个隐藏技巧让导师眼前一亮

别再只用plot了&#xff01;用Matplotlib画函数曲线&#xff0c;这5个隐藏技巧让导师眼前一亮 第一次用Matplotlib画函数曲线时&#xff0c;我交上去的作业被导师用红笔圈出了十几个问题——坐标轴标签太小、曲线颜色难以区分、图例位置遮挡关键数据点。那次经历让我意识到&…...

告别登录系统!手把手教你用BMC和NVMe-MI 1.2b监控企业级SSD健康状态

企业级SSD健康监控实战&#xff1a;基于BMC与NVMe-MI 1.2b的带外诊断指南 当服务器突然宕机或操作系统无法启动时&#xff0c;传统依赖系统内工具&#xff08;如smartctl&#xff09;的SSD监控手段立即失效。此时&#xff0c;运维工程师往往陷入被动——既无法确认是否为存储设…...

智能送餐车的设计(有完整资料)

资料查找方式&#xff1a;特纳斯电子&#xff08;电子校园网&#xff09;&#xff1a;搜索下面编号即可编号&#xff1a;T1632305M设计简介&#xff1a;本设计是基于STM32的智能送餐桌&#xff0c;主要实现以下功能&#xff1a;1.实现送餐车的移动、菜品点餐&#xff0c;菜品上…...

告别虚拟机!用树莓派4打造你的专属移动SLAM小车:硬件选配、系统烧录到ORB-SLAM3运行全记录

用树莓派4构建移动SLAM小车&#xff1a;从硬件组装到ORB-SLAM3实战指南 当机器人爱好者第一次尝试将SLAM算法部署到实体设备时&#xff0c;往往会面临硬件兼容性、系统优化和实时性三大挑战。本文将带你用树莓派4打造一个可移动的SLAM演示平台&#xff0c;不仅解决ORB-SLAM3在A…...

文科生逆袭!零基础转行AI,我靠AI工具直接涨薪50%!

本文分享了作者从文科背景转行AI的成功经验。作者首先打破文科生不适合进入AI行业的误区&#xff0c;选定AI产品和提示词工程师作为切入点。接着&#xff0c;作者通过大量使用AI工具建立AI体感&#xff0c;并制作了一个轻量级的项目作品集&#xff0c;展示了如何利用AI工具梳理…...

数字阅读革命:fanqienovel-downloader如何重塑你的小说收藏体验

数字阅读革命&#xff1a;fanqienovel-downloader如何重塑你的小说收藏体验 【免费下载链接】fanqienovel-downloader 下载番茄小说 项目地址: https://gitcode.com/gh_mirrors/fa/fanqienovel-downloader 在信息爆炸的时代&#xff0c;我们每天消费着海量的数字内容&am…...

从CTF杂项签到题到实战:手把手教你用ZipCenOp和010Editor破解伪加密与文件头修复

从CTF杂项签到题到实战&#xff1a;手把手教你用ZipCenOp和010Editor破解伪加密与文件头修复 在网络安全竞赛和实际渗透测试中&#xff0c;压缩包分析是数字取证的基础技能。本文将带你从零开始&#xff0c;掌握Zip伪加密识别、文件头修复等核心技巧&#xff0c;并通过实战案例…...

KNIME Server值不值得买?中小团队协作与自动化部署的深度体验报告

KNIME Server值不值得买&#xff1f;中小团队协作与自动化部署的深度体验报告 当你的数据分析团队从三五人扩展到十几人&#xff0c;每天早上的第一件事不再是喝咖啡&#xff0c;而是处理各种工作流版本冲突、手动执行定时任务、反复解释流程逻辑时&#xff0c;KNIME Server这个…...

别再手动改仿真值了!用LabVIEW 2020 + mbslave实现Modbus TCP数据自动读写与监控

LabVIEW 2020与Modbus TCP自动化监控实战指南 在工业自动化测试领域&#xff0c;手动修改仿真参数的时代已经过去。想象一下这样的场景&#xff1a;凌晨三点的生产线突然出现异常&#xff0c;而你的系统能够自动捕捉数据变化、触发警报并记录完整的过程数据——这正是现代自动…...