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

http://www.lryc.cn/news/120758.html

相关文章:

  • 一篇文章搞懂如何使用JDBC操作数据库,还有JDBC进阶操作
  • 9.3.2.1网络原理(UDP)
  • 21、stm32使用LTDC驱动LCD
  • 合并两个有序链表
  • 深入了解Unity的Physics类:一份详细的技术指南(七)(上篇)
  • 数据结构与算法-数组(附阿里面试题)
  • k8s集群网络插件搭建——————解决集群notready(k8s1.20版本,docker24)
  • 有血有肉的PPT
  • 使用C语言实现UDP消息接收
  • 图片加水印
  • Nginx代理接口访问返回404
  • 湘大 XTU OJ 1097 排序 题解:c++ 函数库的使用 快速排序 归并排序 冒泡排序
  • Stable Diffusion AI绘图教学
  • 39、传输层的任务和协议
  • 系统架构设计专业技能 · 网络规划与设计(三)【系统架构设计师】
  • 使用Matplotlib判断鼠标是否点击在当前线上的详细指南
  • http get、post、put
  • 仅使用 CSS 创建打字机动画效果
  • pytest fixture 高级使用
  • 远程控制医疗行业应用解析:如何满足医院合规需求?
  • 【C++】开源:glog日志库配置使用
  • 使用 React Native CLI 创建项目
  • 在R中将列表(list)转换为向量(vector)
  • access怎么做进销存?借助access开发进销存管理应用
  • css实现卡片的左上角有一个三角形的遮盖效果
  • 中间件RabbitMQ消息队列介绍
  • MySQL不知道密码,直接修改密码
  • Win10关闭自动更新的方法和影响(Windows modules installer worker cpu占用过高)
  • Xcode 基座打包
  • 最强自动化测试框架Playwright(9)- 下载文件