react简书项目学习笔记39项目上线流程

最新推荐文章于 2023-02-10 14:47:29 发布
原创 最新推荐文章于 2023-02-10 14:47:29 发布 · 330 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#项目上线

本文介绍如何使用XAMPP部署前后端分离的项目，包括启动Apache服务，配置后端JSON文件路径，以及前端代码的上线流程。具体步骤为：首先确保XAMPP已安装并启动Apache服务，然后将后端的JSON文件放置于xampp/htdocs/api目录下，通过http://localhost:8080/api/json名访问；接着删除前端public目录下的api文件夹，运行npm run build命令，最后将生成的build文件夹内容复制到htdocs目录下。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.打开xampp
在这里插入图片描述
2.启动apache服务
在这里插入图片描述
3.后端的json文件放在api目录下，api目录放在xampp/htdocs下
在这里插入图片描述
这样之后通过路由
http://localhost:8080/api/json名
就可以访问到对应的文件
4.前端代码文件删除public目录下的api文件夹
运行命令npm run build
把生成的build文件夹里的文件全部粘贴到htdocs目录下
这样就相当于完成了上线，
访问Localhost:8080就访问到了

react+node阿里云搭配宝塔实现项目上线（保姆级教学）
2401_82601047的博客
07-25 1319
这个请求，我们只需要将http://127.0.0.1换成我们的公网IP即可。例如：47.94.230.142：3333。输入我们上面表他账户登陆信息中的username和password。如果不知道自己的公网IP可以去阿里云实例中查看。
React应用打包和部署上线（腾讯云静态网站托管）
阿棱的博客
09-11 1426
1、关于react应用的打包 这个链接已经讲的很详细了：https://www.jianshu.com/p/c14c427a6b3b（ React打包注意事项及静态文件服务搭建） 讲一下我遇到的问题：执行serve的命令，报错。serve : 无法加载文件 F:\Program Files\nodejs\node_global\serve.Exceptionps1，因为在此系统上禁止运行脚本。 解决方法：需要通过控制台执行，用vscode终端会有错误提示。 2、开通腾讯云账号，然后开通腾讯云的6块钱1年的静
React项目实战之租房app项目（十）个人中心模块&登录访问控制&项目打包部署上线
小陈工的博客
02-10 1290
到此为止，我们的项目就已经全部开发完成了，由于篇幅有限，我们只展示了一部分的业务逻辑的编写，在真实的生产环境中，还要根据公司的需求去灵活运用这些知识。
React项目从开发到上线运行全过程
weixin_43924896的博客
10-27 289
安装nodejs 使用nodejs的npm安装脚手架create-react-app 使用creat-react-app创建基础的react项目 开发 npm start运行项目 npm build打包项目（压缩和编译） 打包后的代码****部署到物理主机的web服务器上 完成
React、Vue项目上线的改善
focusdroid的博客
10-16 504
React、Vue项目上线前的那些事儿 直接使用项目中的东西进行打包 var path = require('path');//引入处理路径path模块 var htmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin')//
React16.4开发简书项目之react-redux源码-附件资源
03-05
React16.4开发简书项目之react-redux源码-附件资源
(源码)基于 React 框架的学习笔记项目.zip
06-07
# 基于 React 框架的学习笔记项目 ## 项目简介 本项目聚焦于 React 框架的学习，通过代码示例与总结的形式，涵盖了 JSX 语法、组件表示、生命周期、父子组件传值、setState 使用以及 DIFF 算法等核心知识，为学习 ...
(源码)基于 React 开发框架的简书项目.zip
最新发布
07-25
# 基于 React 开发框架的简书项目 ## 项目简介 本项目基于 React 开发框架打造了一个类似简书的内容展示平台。它从零基础入门开始，逐步深入实战，完整呈现了 React 在实际项目中的开发流程与应用。 ## 项目的主要...
【已解决】react 简书项目，全局引用后iconfont图标变成方块问题
超逸の学习技术博客
10-13 1769
背景 最近，在做 react 简书项目时候，使用 iconfont 时，出现图标变成方块问题，想了想，应该没有什么问题啊，后面发现 styled-components 中创建全局样式替换成了 createGlobalStyle。 解决 createGlobalStyle 时，需要导出当前全局样例，例如我的 iconfont.js 文件代码如下： import { createGlobalStyle } from 'styled-components'; /* 使用 reset.css 设置默认样式*/ ex
react入门实战项目-类印象笔记应用源码
08-11
上个资源记录分享了如何使用React实现一个ToDoList小Demo,通过该Demo,菜鸟们可以学会如何搭建环境，新建项目，添加组件，运行项目，简单的数据处理和交互，如何引入样式文件等内容。本篇，将记录如何使用React实现一...
react项目 上线配置流程
qq_42099772的博客
05-31 978
react项目、阿里云服务器、nginx代理、linux，xftp跟xshell工具，用来跟远程服务器交互，xftp上传本地文件到服务器，xshell服务端命令行 服务器端，我用的Linux、ubantu，没有图形化，只有命令。 首先你要有个react项目，这个很简单，npm install -g create-react-app、create-react-app your-app-name，项目创建完成后，cd your-app-name，npm run start启动，访问http://loca
慕课 简书项目 个人笔记
t85952099的博客
12-04 581
第1章 课程导学 本章主要介绍学习react的重要性，课程的知识大纲，学习前提，讲授方式及预期收获。 1-1 课程导学 React由Fackbook 2013年5月推出开源框架， 函数式编程 React 16以后的版本 -->也称React Fiber 第2章 React初探 本章主要讲解React项目的开发环境搭建，工程代码结构及React中最基础的语法内容，同时对前端组件...
简书项目笔记总结-Charles的使用
qiguoqi777的博客
04-05 232
下载安装后，tools—》add，添加网址，添加本地地址，完成。
react第一次打包上线成功，纪念一下，哈哈哈哈哈
jingtian678的博客
05-21 464
react项目后台及上线步骤
weixin_30896825的博客
12-05 389
应同学要求，本人将react项目创建后台及上线流程书写如下： 前端部分 略…… 后台部分 （注：这里的后台是用的nodejs搭建的，使用的是express框架+ejs模板） 首先通过express快速搭建后台环境 express -e 项目名 cd 项目名 npm i 有可能你的电脑里面没有全局安装express获安装了页显示不是内部命令，这时，就需要使用如下命令在命令...
create react app 前端路由应用和部署
chuangua8063的博客
12-14 543
reactjs官方提供的create react app ，首先下载安装node.js 及npm，利用npm下载脚手架。 持久使用阿里的npm镜像命令：npm config set registry https://registry.npm.taobao.org 然后全局安装npmins...
React简书项目前端功能完善与文件结构解析
资源摘要信息:"React简书项目前端功能以完善" React是一个开源的前端JavaScript库，由Facebook和社区成员共同维护，用于构建用户界面，尤其是单页应用（SPA）。React遵循组件化的理念，将复杂的网页拆分成一个个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值