使用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.rhkb.cn/news/89313.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

命令模式(C++)

定义 将一个请求(行为)封装为一个对象,从而使你可用不同的请求对客户进行参数化;对请求排队或记录请求日志,以及支持可撤销的操作。 应用场景 在软件构建过程中,“行为请求者”与“行为实现者”通常呈现一种“紧耦合”。但在某些场合——比…

jmeter提取token方式以及设置成全局变量(跨线程组传token值)方式

前言 今天Darren洋教大家如何使用jmeter中的插件来进行token值的提取与调用,今天Darren洋介绍两种jmeter提取token值的方式,一种是在当前线程组中直接提取token值,一种是跨线程组的方式进行token值的提取并调用给不同线程组里的HTTP接口使用。…

软件测试工程师的职业发展方向

一、软件测试工程师大致有4个发展方向: 1资深软件测试工程师 一般情况,软件测试工程师可分为测试工程师、高级测试工程师和资深测试工程师三个等级。 达到这个水平比较困难,这需要了解很多知识,例如C语言,JAVA语言,…

每天一道leetcode:1466. 重新规划路线(图论中等广度优先遍历)

今日份题目: n 座城市,从 0 到 n-1 编号,其间共有 n-1 条路线。因此,要想在两座不同城市之间旅行只有唯一一条路线可供选择(路线网形成一颗树)。去年,交通运输部决定重新规划路线,以…

el-tree-select那些事

下拉菜单树形选择器 用于记录工作及日常学习涉及到的一些需求和问题 vue3 el-tree-select那些事 1、获取el-tree-select选中的任意层级的节点对象 1、获取el-tree-select选中的任意层级的节点对象 1-1数据集 1-2画面 1-3代码 1-3-1画面代码 <el-tree-selectv-model"s…

React antd tree树组件 - 父子节点没有自动关联情况下 - 显示半选、全选状态以及实现父子节点互动

实现的效果图如下&#xff1a; 如Ant Design Vue 中所示&#xff0c;并没有提供获取半选节点的方法&#xff0c;当设置checked和checkStrictly时&#xff0c;父子节点也不再自动关联了 前提&#xff1a;从后端可以获取的数据分别是完整的树型数据、所有选中的节点数据&#…

教你如何为博客网站申请阿里云的免费域名HTTPS证书

如何为博客网站申请阿里云的免费域名HTTPS证书 文章目录 如何为博客网站申请阿里云的免费域名HTTPS证书前置条件&#xff1a;步骤1 例如阿里云控制台&#xff0c;选择SSL证书步骤2 申请购买免费证书步骤3 创建证书步骤3.1 证书申请步骤3.2 DNS域名验证 步骤4 等待证书审核成功&…

徐明君:品牌定位塑造独特价值与关键差异的新思维

在当今竞争激烈的市场环境中&#xff0c;品牌定位已成为企业生存与发展的关键要素。近年来&#xff0c;随着消费者需求的不断变化和市场的持续发展&#xff0c;品牌定位的内涵和方法也在不断演进。本文将探讨品牌定位的核心概念、作用以及如何有效运用品牌定位策略&#xff0c;…

如何将区块链新闻稿发布到海外媒体?

随着区块链技术的不断发展&#xff0c;越来越多的区块链项目涌现出来&#xff0c;各大媒体也开始关注和报道区块链新闻。然而&#xff0c;如何将区块链新闻稿发布到海外媒体成为了许多区块链项目所面临的难题。本文将介绍一些有效的方法&#xff0c;帮助区块链项目将新闻稿发布…

Kafka API与SpringBoot调用

文章目录 首先需要命令行创建一个名为cities的主题&#xff0c;并且创建该主题的订阅者。 1、使用Kafka原生API1.1、创建spring工程1.2、创建发布者1.3、对生产者的优化1.4、批量发送消息1.5、创建消费者组1.6 消费者同步手动提交1.7、消费者异步手动提交1.8、消费者同异步手动…

【Vue-Router】路由模式

1. WebHashHistory index.ts import { createRouter, createWebHistory, RouteRecordRaw, createWebHashHistory } from "vue-router";// 路由模式 //vue2 mode history -> vue3 createWebHistory //vue2 mode hash -> vue3 createWebHashHistory //vue2 m…

动动小手搭建私人大模型人工智能私人助理

引言&#xff1a; 去年12月OpenAI公司的ChatGPT3.5彻底引爆人工智能圈&#xff0c;今年国内大公司争相进入大模型的赛道&#xff0c;打造自己的大模型。前些日子的世界人工智能大会上&#xff0c;可谓是百模大战&#xff0c;热闹纷呈。 ChatGPT的出现&#xff0c;的确给人们带…

解读spring中@Value 如何将配置转自定义的bean

实现方式 着急寻求解决方式的猿友先看这块 定义配置转化类 public class UserConverter implements Converter<String, List<User>> {Overridepublic List<User> convert(String config) {if (StringUtils.isEmpty(config)) {return Collections.emptyLis…

iOS手机无法安装Charles 的ssl证书

问题描述 iOS客户端安装证书时一直卡在下载这一步&#xff0c;无法抓包 1、打开Charles&#xff0c;选择help→SSL Proxying→Install Charles Root Certificate on a Mobile Device or Remote Browser 2、按照步骤1中的提示进行操作&#xff0c;手机连接电脑代理&#xff0c;…

Gitlab CI/CD笔记-第二天-主机套接字进行构建并push镜像。

一、安装gitlab-runner 1.可以是linux也可以是docker的 2.本文说的是docker安装部署的。 二、直接上.gitlab-ci.yml stages: # List of stages for jobs, and their order of execution - build-image build-image-job: stage: build-image image: harbor.com:543/docke…

【100天精通python】Day34:使用python操作数据库_ORM(SQLAlchemy)使用

目录 专栏导读 1 ORM 概述 2 SQLAlchemy 概述 3 ORM&#xff1a;SQLAlchemy使用 3.1 安装SQLAlchemy&#xff1a; 3.2 定义数据库模型类&#xff1a; 3.3 创建数据表&#xff1a; 3.4 插入数据&#xff1a; 3.5 查询数据&#xff1a; 3.6 更新数据&#xff1a; 3.7 删…

微信小程序(由浅到深)

文章目录 一. 项目基本配置1. 项目组成2. 常见的配置文件解析3. app.json全局的五大配置4.单个页面中的page配置5. App函数6.tabBar配置 二. 基本语法&#xff0c;事件&#xff0c;单位1. 语法2. 事件3. 单位 三. 数据响应式修改四 . 内置组件1. button2. image3. input4. 组件…

VR全景乡村旅游浇灭乡愁,近距离体验自然之美

说起乡愁&#xff0c;可能每位漂泊的游子都有所感受&#xff0c;在外漂泊数十载&#xff0c;每到佳节倍思亲&#xff0c;家乡的一草一木都浮现在脑海中&#xff0c;满载着儿时的回忆。为了留住那抹儿时回忆&#xff0c;VR全景助力数字化乡村建设。 乡村振兴是国家的重大战略&am…

【java面向对象中static关键字】

提纲 static修饰成员变量static修饰成员变量的应用场景static修饰成员方法static修饰成员方法的应用场景static的注意事项static的应用知识&#xff1a;代码块static的应用知识&#xff1a;单例设计模式 static静态的意思&#xff0c;可以修饰成员变量&#xff0c;成员方法&a…