项目nginx部署到非根目录下react配置（基于create-react-app的打包文件路径问题）

最新推荐文章于 2024-06-25 07:30:00 发布
原创 最新推荐文章于 2024-06-25 07:30:00 发布 · 5k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react build #create-react-app 打包 #react nginx

本文介绍了解决npm run build后生成的打包文件仅能在服务器根目录访问的问题。通过在package.json中添加homepage:.，实现了对根目录下子目录的访问。

 

执行npm start 一切正常, 但是 npm run build 之后生成的打包文件只能在服务器根目录访问

若需要访问在根目录下的子目录，只需修改package.json文件

添加

"homepage":".",

即可

 

【nginx 非根路径部署】
Aspiring_boy的博客
08-02 679
nginx 非根路径部署
Nginx部署react项目（子目录）
qq_38433300的博客
01-15 2151
路由的两种模式 history：hash 不需要服务器支持 history：browser react-router官方推荐，需要服务器支持（因为是SPA项目，url切换时需要服务器始终返回index.html） 由于hash不需要服务器支持，只需要放上去就ok了，不需要不过多的配置，就不多说了 此篇文章主要是记录部署history：browser 模式的相关配置...
解决vuejs或react应用在nginx非根目录下部署时访问404的问题
weixin_33868027的博客
12-24 9205
以往部署vuejs应用都是直接在nginx的location为/下直接部署，这次遇到要将vue应用部署在/vuejs-admin的非根下，使用以往部署方案直接访问就会404，这时修改步骤如下：1、修改项目router配置，如下：这里一是要修改router模式为history，另一个就是修改base地址为要访问的/vuejs-admin的地址，注意前后都有斜线2、修改build...
react部署服务器不放在根目录配置
oyy_1126的博客
08-20 1230
1.路由只能用HashRouter，BrowserRouter页面空白 2.package.json 加上一行 “homepage”:"." 3.npm run build打包后整个build扔到服务器 4.访问路径xxx.com/build/#
create-react-app v5 打包配置(部署到非根目录)
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
10-24 4315
publicPath: 用于指定构建后静态资源在服务器上的路径。base: 用于指定应用程序的根路径，以确保路由可以正确匹配到对应页面。这两个配置项在部署到非根目录时很重要，可以确保应用的资源和路由正常加载和导航。
docker入门之部署前端项目，以create-react-app为例
lucky569的博客
09-05 4405
1.github上先下载create-react-app的源码 git clone https://github.com/facebook/create-react-app.git 执行ls查看一下并cd 进入该项目. 2.在项目根目录下创建Dockerfile文件,并编写以下内容 vi Dockerfile // 创建文件 编写内容： # node版本号 FROM node:15-alpine # 工作目录 WORKDIR /create-react-app # 添加所有文件到create-rea
React,create-react-app脚手架项目,打包上传到服务器
weixin_41777971的博客
05-17 1230
项目使用create-react-app创建的   打开package.json。 在"name"同级 上添加一个 “homepage”: “.” （如果已经存在则替换） { "name": "client", "version": "0.1.0", "private": true, "homepage": ".", "dependencies": {...后...
node+nginx实现对react进行一键打包部署--windows版
最新发布
m0_51311990的博客
06-25 1411
使用nginx+node实现对react项目进行打包,自动部署到本机.
React项目部署在阿里云服务器ECS
01-07
本来计划是将一个React工程部署在自己的Centos虚拟机中，但是因为一些网络和安全问题暂时停止了这个计划，于是就把该项目转移到阿里云服务器中，这篇笔记记载了如何从第一步开始直到浏览器通过IP可以访问你的React...
Nginx 实战: 部署 React 前端项目
超悠閒的博客
10-06 2890
Nginx 实战: 部署 React 前端项目 文章目录Nginx 实战: 部署 React 前端项目正文1. 准备 React 项目 & 完成打包2. 准备 Docker 镜像 & 配置文件3. 启动 / 停止服务其他资源参考连接完整代码示例 正文 1. 准备 React 项目 & 完成打包 先准备一个 React 项目，使用 create-react-app 脚手架搭建的也好，自己手动搭建的也行，通常是使用 webpack 作为打包工具 这里推荐一个作者自己写的脚手架 $ y
vue-router+nginx 非根路径配置方法
08-27
主要介绍了vue-router+nginx 非根路径配置方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
React脚手架 npm run build之后，放到tomcat下面，所需要修改的配置
IOFE的博客
08-22 1万+
从网上找了许久，也没有找到好的办法 我的项目是用React的官方脚手架 create-react-app 生成的项目之后 然后进行 npm run build 生成的build文件放到 Tomact下面的webapps下面 需要改一点配置，要不资源加载不到 路径：my-app\node_modules\react-scripts\config 改动path.js
React项目的打包与部署
热门推荐
u010565037的博客
03-15 2万+
打包编译 执行完上述命令，打开本地浏览器，输入localhost：3000，就能看到项目的运行效果。此时是开发模式。 若使用npm run build，代码会被编译到build目录。将整个应用打包发布，自动试用webpack进行压缩与优化。 在项目路径下，敲npm run buil，就出现了build文件夹，同时终端显示这些文字： 大致意思是：已经编译好啦。build生成的这些东西要放在服务...
centOS------nginx配置项目时不在/root时，配置自定义根路径
weixin_43119266的博客
09-28 144
转载自：https://blog.youkuaiyun.com/COCOLI_BK/article/details/103038521
前端react+nginx搭建
weixin_51969975的博客
08-28 1344
一. 下载安装 apt install nodejs apt install npm apt install nginx 二. 打包react项目 # 如果使用npm npm run build # 如果使用yarn yarn run build # 压缩上传 三. 部署 1. 解压缩 unzip build.zip # 复制到非root目录下，使得nginx能够读取 cp -r build /var/www/ 2. 更改配置 cd /etc/nginx/sit
使用Nginx反向代理，将React项目打包后部署到服务器的二级子目录
2202_75616310的博客
11-30 3029
，不管#字符后边的路径如何变化，请求的都是#字符之前的地址，可以理解为请求的资源路径一直都是“/”，相当于/#/后边请求的路径都是虚拟路径，而不是服务器的真实路径。但是，如果服务器有多个项目的话，我们就需要将代码部署到服务器根目录里边的子目录了，而放到子目录的话，想让页面顺利访问到文件，和我们使用的路由方式也有关系。我们上线一个项目的时候如果服务器上只有这一个项目的话可以直接将打包后的代码部署到服务器指定的根目录，然后直接上线看就可以看到，不用配置其他项。，路径中会携带一个#字符，请求的链接为“
React 部署nginx二级目录（子目录）
weixin_40918145的博客
06-30 4984
一、背景描述： react打包出来的文件，想部署在 如 https://www.abc.com/webapp下， 本项目使用的是history：hash 模式， 如果使用的是history：browser ，可参考该大神的文章https://www.freesion.com/article/5887723973/ 二、解决方法 1、修改/添加 配置 // package.json "homepage":"." 2、在每一个index.html文件添加 # webapp 是你自己文件夹的名
React + 二级目录 + Nginx配置
fth1002853070的博客
07-25 1505
Nginx 关于 React 二级目录的配置
React项目从创建到部署(Nginx)
wlt19990910的博客
12-07 3161
react项目从创建到打包到服务器部署,希望能给大家一点帮助,如果有问题欢迎各位大佬指出和补充~
React-Pitang：基于Create React App的开发实践
而 eject 操作会将这些隐藏的配置文件（如 webpack.config.js、babel.config.js、eslint.config.js 等）暴露到项目根目录，并将原本由 react-scripts 管理的依赖项平铺出来，使项目脱离 CRA 的约束。虽然这赋予了...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值