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

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

vue项目打包后生成的dist目录如果直接在本地打开index.html,在浏览器中会报错,无法运行起来。

通常我是放到后端搭建的服务上面去运行,当时前端自己也可以是node,nuxt搭建服务器,写接口等等

如果想在本地运行,我们可以借助node.js+express搭建一个服务器,将打包后的文件部署在服务器上,就可以运行起来了。

安装

typescript 复制代码
npm install express -g
npm install express-generator -g
npm install pm2 -g

或者一起安装

typescript 复制代码
npm i express express-generator pm2 -g

创建

安装好之后创建项目

express + 自定义名称

安装依赖

typescript 复制代码
   cd serve 进入项目
   npm install 下载依赖
   npm start  启动项目

看到下面的图证明服务已经开启,端口号的什么的自己看代码去更改(默认是3000,在/bin/www文件中)

在浏览器打开 http://localhost:3000/# 看到到下面的图证明成功了

使用pm2

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

运行命令为:

typescript 复制代码
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下查看所有用户的接口(最简单的接口)

前端调接口拿到数据库中的数据

相关推荐
卸任11 小时前
Vibe coding工具使用心得
前端·ai编程
brien912 小时前
为什么模型标称 1M,Google Antigravity 聊到 256K 却突然失忆?我们给它做了个原生行内监控圆环
前端
修炼的dance12 小时前
录屏关键帧间隔多少合适?六档实测,2秒到10秒小了75.6%
前端
Lank_M12 小时前
关键帧从1秒拉到10秒,录屏小87.3%,摄像头小10.8%
前端
补码缩写12 小时前
用 ffprobe 拆录屏,八成字节在 29 个关键帧上
前端
百思不得小李12 小时前
一个复杂的动态表单是如何实现的
前端·设计模式
陈随易12 小时前
Cmder 停更 17 个月,2.0 支持 Windows Terminal
前端·后端·程序员
风骏时光牛马12 小时前
前沿视界
前端
kyriewen13 小时前
我扫了 814 个依赖,97 个还敢要 Node 10
前端·javascript·程序员
陈随易13 小时前
3000 万人在用的翻译插件,重写一遍就是一门生意
前端·后端·程序员