React 项目创建和打包部署到本地服务器

最新推荐文章于 2024-07-24 11:09:48 发布
最新推荐文章于 2024-07-24 11:09:48 发布
阅读量1.1w 收藏 5
点赞数 4
分类专栏： React
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41805715/article/details/100526806
版权
本文指导如何使用create-react-app创建React项目，并详细阐述了如何将打包后的项目部署到Django服务器，包括静态文件夹配置、index.html修改以及Django服务器的启动。
摘要由CSDN通过智能技术生成

1.React项目创建

npm install -g create-react-app

create-react-app  myProjectName

创建基于Webpack与ES6的简单项目模板

cd  myProjectName

进入创建项目目录

npm start

启动项目

 

2.React项目打包部署到服务器

npm run build

代码会被编译到build目录中

后台使用的是Django框架

 

在后台项目中创建一个static文件夹和templates文件夹

 

在static文件夹中建立四个文件夹分别为css、imgs、js、json

将build目录下的所有文件分别按照后缀名放入对应的文件夹中

 

将build目录下的index.html文件放入

最低0.47元/天 解锁文章
柠檬布丁^O^
关注
专栏目录
Render上部署LibreChat 轻松实现一站式、多租户AI平台
gangkeji的博客
03-09 1892
在Render上部署LibreChat：Render是一款卓越的云平台（Cloud Platform），可以进行容器化部署且提供Free计划。本文介绍在Render上创建web service的方法，以及部署Librechat和环境变量的配置，快速实现在线一站式、多租户AIGC平台的搭建。
记一次react前端项目打包优化的方法
11-20
前文 之前一年多前接手的一个react项目，前段时间因为做业务中台项目，对公司现有的应用项目做中台化改造，这期间将项目部署到uat环境，测试期间，测试小妹妹和产品大叔都吐槽进入uat项目的时候要load很久，白屏时间超过30s，体验很差，生产不至于这么慢但也是白屏时间挺长的，所以减少白屏时间增加用户体验成为了当务之急。复制代码 分析 通过控制台判断加载资源时间还有资源大小 通过开发者工具可以看到白屏的主要原因在于bundle.js这个打包后的文件过大，达到3.6M加上uat环境带宽等问题的话，光加载这个bundle.js就花了30s+，所以白屏时间太长，用户体验差要解决这个问题就得从这个bu
react项目打包
B13362260109的博客
07-20 1339
2.在项目根目录中执行命令serve -s ./build 在build目录中开启服务器。2.在package.json中的scripts标签中，添加分析打包体积命令。3.在浏览器中访问：http://localhost：3000/ 预览项目。2.在路由Router内部，使用Suspense组件包裹组件的内容。2.等待打包完成，打包生成的内容被放在根下的build文件夹中。5.通过浏览器打开的页面，分析图标中的包体积。1.在App组件中，导入Suspense组件。在package.json中。
【React 】开发环境搭建详细指南
最新发布
lph159的博客
07-24 2996
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
保姆级教程手把手教你：react 打包部署在本地服务器
张大侠的博客
08-21 2055
保姆级教程手把手教你：react 打包部署在本地服务器 1、第一步打开小p （全称：phpstudy）,打开环境，启动Nginx 。如下图 2、 创建网站：域名：localhost ,端口：8686（最好在8000-1000之间），根目录：放到站点根下 www 文件中，建一个文件夹 (例如:react-app).如下图 然后点击确定，如下图 创建成功，如下图 3、然后在打开根目录，把你的项目打包好的build里面的文件，放到里面，你新建的react-app 里面，如下图。 本地服务器代码，如下
react项目打包和优化
qq_58956810的博客
07-08 1375
这个js属性在cdn的对象下，所以应该排查一下cdn是否存在的问题，或者说在往上找，排查options对象当中是否存在cdn属性，有些地方写的是userOptions.files，可能是因为htmlWebpackPlugin对象下面是userOptions这个选项，而不是options这个选项，所以会有差异，而我这个地方打印了math对象下面出现的结果就是options选项，（打印的结果是在执行。看一下数据结构的内容，感觉对我处理后端返回的数据并且提交到页面当中很有效，或者是在处理提交数据的时候。
vue、react等单页面项目部署到服务器的方法及vue和react的区别
10-17
随着项目开发的完成，如何将这些Vue或React构建的SPA部署到服务器，以便用户能够通过互联网访问这些应用，成了开发者必须掌握的知识点。 首先，单页面应用需要部署在支持HTTP服务器的环境中。这里常用的服务器有...
React项目部署在阿里云服务器ECS
01-07
本来计划是将一个React工程部署在自己的Centos虚拟机中，但是因为一些网络和安全问题暂时停止了这个计划，于是就把该项目转移到阿里云服务器中，这篇笔记记载了如何从第一步开始直到浏览器通过IP可以访问你的React...
使用Jenkins部署React项目的方法步骤
10-17
在本文中，我们将探讨如何使用Jenkins部署React项目，这是一个自动化构建和部署的过程，可以极大地提高开发效率并减少人为错误。Jenkins作为一个流行的持续集成和持续部署(CI/CD)工具，可以帮助我们实现React项目的...
React项目打包部署注意点 + 宝塔面板几步部署项目
背影、的博客
08-11 3827
1.react项目打包 1.1 终端运行打包命令 在编辑器的终端运行vue项目打包命令 yarn build 打包成功如下： 这时我们可以看到项目目录多出来一个build文件夹，记住它，后面部署就靠它了。 1.2 修改配置 在package.json里面添加一行： "homepage": "." 如果不加上这个的话之后打包的时候,打开index.html会报错，示例如下： 2.宝塔面板部署项目 2.1 部署要求 有一台云服务器（笔者这里用的是腾讯云） 服务器安装宝塔面板 安装教程 2.2 在
React项目快速部署到服务器上（完整版，避坑必备）
qq_42992704的博客
11-17 1万+
从选购服务器到上线第一个React项目流程 文章目录从选购服务器到上线第一个React项目流程1.购买服务器、域名以及配置服务器2.再ubuntu中安装node和npm环境2.1 安装node2.2 安装npm2.3 安装yarn3. 在github上创建一个仓库进行存储代码4.进行配置nginx5.小结 1.购买服务器、域名以及配置服务器 我个人选用的是阿里云的域名和服务器。 下面步骤是购买域名和服务器之后的操作； ???? 1. 打开域名的页面，点击解析，进行配置，讲服务器的地址复制过来，进行与域名进行
超简单的React项目打包后部署到服务器上
nihaio25的博客
12-21 1万+
前言：我们都知道有些react项目打包后生成的不管是dist,还是build的文件，直接打开都无法直接浏览到项目，然后查看控制器，就发现它报错。 如图： 用脚手架创建的 react / vue 项目，已经集成了webpack，只要运行命令：npm run build 或 yarn run build 项目就会编译成功，生成一个dist文件夹，现在问题来了，如何启动这个编译后项目呢。 ...
React项目如何打包发布及遇到的坑
热门推荐
天工开物
06-29 5万+
刚开始学习react，遇到一些小问题。我使用的是create-react-app脚手架生成的项目。这个脚手架一键生成react项目，非常方便。先简单记录一下这个新建项目的过程。一、打包1、安装使用npm install -g create-react-app 122、生成新项目create-react-app my-app 12(生成的项目最好不要用驼峰式命名，否则后面生成文件提示也会让你改)３、...
react项目代理配置
qq_33203555的博客
01-13 1万+
使用create-react-app创建项目后，在本地开发时 ，配置请求转发是常见的。配置转发之后我们在本地环境就能请求到服务器的接口。 使用以下命令生成本地webpack配置文件 npm run eject 生成配置文件后，就到配置代理了，也就是请求转发。create-react-app创建的项目与其他的不同，需要在package.json中配置。 "proxy":{ "/
JavaWeb之React框架
lishinho的博客
03-13 3385
本篇提取信息自阮一峰老师的博客：http://www.ruanyifeng.com/blog/2015/03/react.html 一，React是什么 A JavaScript library for building user interfaces。 React一个基于JS的MVC框架，由于我们在手机浏览器上运行的Web App的性能不如在应用商店下载的Native APP，其原因主要由...
React 打包部署服务器踩坑记录
小小云麓的博客
01-31 4702
公司项目前端开发用的是React,所以自己一直在本地测试开发，最后终于开始打包上线了 项目中用axios封装了工具类来请求，自动匹配开发和测试api if (process.env.NODE_ENV === 'development') { axiosIns.defaults.baseURL = '/dapi'; } else if (process.env.NODE_ENV =...
React项目服务端部署过程记录（create-react-app）
weixin_33950035的博客
03-13 592
1.前言 说在最最前 这次分享比较啰嗦啦，想说的很多。实际问题的解决是 “2-3.恍然大悟 部分”，可以直接跳过其他多余的絮叨哦～ 最近入职新公司由于前端主要是react，遂开始去学习了解react，这两天跟着电子书《The Road to learn React》敲了一遍，巩固了js，熟悉了react的基础知识。但在完成最后部署上线是遇...
单页面应用（Vue、React）部署到服务器全攻略
"本文主要探讨了Vue.js和React.js等单页面应用的部署到服务器的正确方法，重点讲解了如何配置Nginx服务器以解决常见的部署问题，如资源找不到、直接访问HTML空白页以及刷新路由时出现404错误。" 在开发Vue或React等...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值