当前位置: 首页 > 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…...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版&#xff…...

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

C# SqlSugar:依赖注入与仓储模式实践

C# SqlSugar&#xff1a;依赖注入与仓储模式实践 在 C# 的应用开发中&#xff0c;数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护&#xff0c;许多开发者会选择成熟的 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;SqlSugar 就是其中备受…...

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

嵌入式学习笔记DAY33(网络编程——TCP)

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...