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

news2024/12/24 11:27:06

使用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下查看所有用户的接口(最简单的接口)
在这里插入图片描述
前端调接口拿到数据库中的数据
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/853531.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

pve和openwrt以及我的电脑中网络的关系和互通组网

情况1 一台主机 有4个口,分别eth0,eth1,eth2,eth3 pve有管理口 这个情况下 ,没有openwrt 直接电脑和pve管理口连在一起就能进pve管理界面 情况2 假设pve 的管理口味eth0 openwrt中桥接的是eth0 eth1 eth2 那么电脑连接eth3或者pve管理口设置eth3&#xf…

jmeter创建一个压测项目

1.jemeter新建一个项目: 2.接下来对Thread进行描述,也可以先使用默认的Thread进行操作。 3.添加http请求头的信息。按照如图所示操作 4.在请求头里面添加必要的字段,可以只填必要字段就可以 5.添加Http请求信息,如下图&#xff…

【webpack】动态配置cdn,多模板入口项目搭建

动态配置多模板 按照这个模板创建项目 安装glob,获取目录下的文件名称 封装方法utilsConfig,动态生产 page // pages 多入口配置 const path require("path");// glob 是 webpack 安装时依赖的一个第三方模块,该模块允许你使用 * 等符号, …

图片如何转pdf?几个小妙招了解一下

图片如何转pdf?在日常工作和生活中,我们经常需要将图片转换成PDF格式,以便于我们进行存档、传输或打印。那么,如何快速、方便地将图片转换成PDF呢?这里介绍就为大家介绍几款好用的工具。 我们可以使用【迅捷PDF转换器】…

opencv动态目标检测

文章目录 前言一、效果展示二、实现方法构造形态学操作所需的核:创建背景减除模型:形态学操作:轮廓检测: 三、代码python代码C代码 总结参考文档 前言 很久没更新文章了,这次因为工作场景需要检测动态目标,特此记录一下。 一、效果展示 二、实现方法 基…

简化AD管理减少IT工作负担

管理和保护混合 AD 环境 IT 管理员几乎每天都要创建和管理多个 AD 对象,利用本机AD工具(如Active Directory用户和计算机控制台以及PowerShell脚本)来执行这些任务并不理想,因为它们必须在多个控制台之间切换才能执行这些任务&am…

【UE4 RTS】02-Camera Movement

前言 本篇实现了CameraPawn的基本移动功能 步骤 1. 打开项目设置,在 引擎——输入 一栏中删除模板自带的操作映射 在轴映射中,删除“TurnRate” 添加如下键值 2. 打开“RTS_PlayerController_BP”,在事件图表中添加如下节点 此时运行游戏就…

MySQL和钉钉单据接口对接

MySQL和钉钉单据接口对接 数据源系统:钉钉 钉钉(DingTalk)是阿里巴巴集团打造的企业级智能移动办公平台,是数字经济时代的企业组织协同办公和应用开发平台。钉钉将IM即时沟通、钉钉文档、钉闪会、钉盘、Teambition、OA审批、智能人事、钉工牌…

Java后台生成ECharts图片

前言 通过echarts的jar包,Java后台生成一张图片,并把图片插入到word中。关于word插图片的代码在下一章。 需要用到的工具PhantomJS,Echarts-convert.js,jquery.js,echarts.js。 1.PhantomJS 介绍 PhantomJS是一个不需要浏览器的富客户端。 官方介绍&…

PS的一些智能对象是怎么用的?用于包装设计该怎么使用?

大家都对一些效果图不太理解,我现在就献丑给大家讲一下,教程都是网友盛传的,我自己学习并且有所体会。 一般做的非常好的PS效果图都是外国人自己做的,所以大多数效果图都是英文,细心的网友会发现,中文的是一…

IOS上架流程

IOS上架流程 准备 开发者账号完工的项目 上架步骤 一、创建App ID二、创建证书请求文件 (CSR文件)三、创建发布证书 (CER)四、创建Provisioning Profiles配置文件 (PP文件)五、在App Store创建应用六、…

MPLAB X IDE v6.1.0 使用MCC代码配置器

安装教程应该很好搜到,如果没有 代码配置器(MPLAB Code Configurator,MCC)说明IDE版本太低了,建议更新下版本; 刚安装完成之后第一次启动会很卡,属于正常现象; 我这好像是离线模式…

博客网站添加复制转载提醒弹窗Html代码

网站如果是完全禁止右键(复制、另存为等)操作,对用户来说体验感会降低,但是又不希望自己的原创内容直接被copy,今天飞飞和你们分享几行复制转载提醒弹窗Html代码。 效果展示: 复制以下代码,将其…

11_Vue3中的新的组件

1. Fragment 在Vue2中:组件必须要有一个跟标签在Vue3中:组件可以没有根标签,内部会将多个标签包含在一个Fragment虚拟元素中好处:减少标签层级,减少内存占用 2. Teleport 什么是Teleport?——Teleport 是一种能够将…

ubuntu22.04源码编译opencv4.6

第一次编译之后,测试opencv_example不成功,又重新卸载了再装了一次,成功了,简单记录一下。 下载opencv4.6以及opencv_contrib-4.6.0 opencv下载地址 opencv-contrib下载地址解压以后,把contrib放到opencv4.6文件夹下 第…

无涯教程-Perl - getnetent函数

描述 此函数从/etc/networks文件获取下一个条目,返回-($name,$aliases,$addrtype,$net) 如果/etc/networks文件为空,则它将不返回任何内容,并且调用将失败。 语法 以下是此函数的简单语法- getnetent返回值 此函数在错误时返回undef,否则在标量context中返回网络地址,在错…

Qt应用开发(基础篇)——框架类 QFrame

一、前言 QFrame继承于QWidget,被QLCDNumber、QToolBox、QLabel、QListView等部件继承,是一个拥有矩形框架的基类。 QFrame可以直接创建成一个没有内容的的矩形框架,框架的样式由边框厚度(lineWidth)、框架形状(QFrame::Shape)和阴影样式(QFr…

药物临床试验项目风险管理︱科济生物医药临床运营部总监张立峰

科济生物医药(上海)有限公司临床运营部总监张立峰先生受邀为由PMO评论主办的2023第十二届中国PMO大会演讲嘉宾,演讲议题:药物临床试验项目风险管理---回顾疫情考验下的风险管理应对。大会将于8月12-13日在北京举办,敬请…

小程序外包开发框架

小程序是一种轻量级的移动应用程序,通常用于在微信和其他平台上提供简单的交互和功能。以下是一些常见的小程序开发框架以及它们的特点,希望对大家有所帮助。北京木奇移动技术有限公司,专业的软件外包开发公司,欢迎交流合作。 1.微…

冯诺依曼体系结构与进程概念理解

目录 1. 先谈硬件 1、初步理解冯诺依曼体系结构 2、理解各个模块之间的协作 2. 再谈软件 1、为什么要有操作系统 2、操作系统如何管理软硬件资源 3. 再谈进程 1、什么是进程 2、如何理解进程 3、Linux 是如何管理进程的 写在最后: 1. 先谈硬件 1、初步理…