reate-react-app 打包后引用路径问题

最新推荐文章于 2023-10-24 10:36:17 发布
最新推荐文章于 2023-10-24 10:36:17 发布
阅读量6.1k 收藏 1
点赞数
CC 4.0 BY-SA版权
文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_36094484/article/details/80310315
本文介绍了解决create-react-app项目中打包后css、js文件路径引用错误的方法。通过设置package.json中的homepage属性为'.'，可以确保生成的静态资源文件路径正确。

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

沈江平
关注
bash: create-react-app: command not found
游海东的技术专栏
05-23 3598
1、错误描述 Administrator@SKY-20160824VTF MINGW64 /d/HBuilderProjects/cmn $ npm install create-react-app npm WARN saveError ENOENT: no such file or directory, open 'D:\HBuilderProjects\ ...
create-react-app 配置代理
如故的博客
08-27 1353
create-react-app 配置代理 1、安装插件 http-proxy-middleware npm i http-proxy-middleware 2、在 src 目录下新建文件 setupProxy.js 文件 // 配置代理 - 用于联调 const { createProxyMiddleware } = require('http-proxy-middleware') console.log('PROXY: ', process.env.PROXY_ENV) module.exports
详解React项目如何修改打包地址（编译输出文件地址）
10-17
主要介绍了详解React项目如何修改打包地址（编译输出文件地址），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
create-react-app 打包后资源路径引入不正确
Wcharles666的博客
05-21 2563
解决方案 在根目录下package.json配置 homepage: '.' 为避免麻烦，使用HashRouter代替BrowserRouter
creact-react-app打包后文件路径有问题
qq_26889291的博客
07-12 485
creact-react-app打包文件路径有问题
react 项目打包路径问题
前端一线搬运工的博客
03-18 2940
可能项目放得位置不是根目录, 导致css, js的绝对路径找不到文件. 如下配置即可解决: package.json文件添加 "homepage":"." //配置打包文件的路径是相对当前目录为根目录 注意：需要react-scripts@0.9.0以上版本。 ...
React打包
weixin_45667438的博客
01-20 1518
打包为相对路径 在package.json中加入"homepage":"./" 开发模式和生产模式配置 首先在根目录也就是与package.json文件同级的目录创建两个文件,名字分别是用于开发版本的 .env.development 和用户生产版本的 .env.production 在.env.development文件中设置开发时的url，比如： REACT_APP_URL=http://localhost:8080 ...
create-react-app构建项目慢的解决方法
08-27
然而，有时候使用`create-react-app`创建项目时，可能会遇到速度慢的问题，这主要归因于从npm默认仓库下载依赖包的过程。以下是一些解决`create-react-app`构建项目慢的策略。 首先，问题在于`create-react-app`在...
RN几种脚手架工具的使用和对比（react-native-cli、create-react-native-app、exp）
weixin_33800463的博客
04-28 3242
本文档将持续更新，欢迎指正 1、react-native-cli 无法使用exp服务 react-native init program-name #初始化项目 npm start（react-native start） #在项目目录下启动 js service react-native run-android #已连接真机或开启模拟器前提下，启动项目 react-native run-io...
解决create React-app脚手架中路由组件跳转及传参问题（2）
weixin_58576761的博客
07-09 646
解决create React-app脚手架中路由组件跳转及传参问题-----一、通过 state 属性传参(基本数据 二、复杂数据类型)、通过Link跳转页面，在路由path后使用 ？拼接传参(只能传基本类型数据) 三、在路径中 / 后传递动态参数(例：/:id)......
关于react-create-app 打包后路径报错问题
weixin_34129696的博客
05-31 1067
使用create-app 默认打包的时候静态文件采用的是绝对路径，指向项目的根目录，但是我们的项目往往不是放在服务器的根目录下，这个时候可能会报错，这时候只需要在packge.json 中添加 "homepage": "." 即可，会用相对路径去打包 转载于:https://blog.51cto.com/13496570/2403405...
creat-react-app 修改打包路径
在这个数字革命的时代，我们将引领您穿越去中心化、智能合约、加密货币以及分布式应用程序的世界。无论您是初学者还是经验丰富的区块链开发者，我们都致力于为您提供有价值的信息和见解。
10-14 3926
需求： 将打包后的文件放到 myApp.org 文件夹 (非 build文件夹) 中，并且此文件夹放在该仓库的外面，即相对于根目录…/ 方法1：更改 .env 配置 配置 package.json 命令 { "homepage": ".", //新增此项，打包后的静态文件引入路径改为相对路径'./' "scripts": { "start": "react-scripts start", "build": "react-scripts build", } } 新建 .env
create-react-app v5 打包配置(部署到非根目录)
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
10-24 4196
publicPath: 用于指定构建后静态资源在服务器上的路径。base: 用于指定应用程序的根路径，以确保路由可以正确匹配到对应页面。这两个配置项在部署到非根目录时很重要，可以确保应用的资源和路由正常加载和导航。
超简单的React项目打包后部署到服务器上
nihaio25的博客
12-21 1万+
前言：我们都知道有些react项目打包后生成的不管是dist,还是build的文件，直接打开都无法直接浏览到项目，然后查看控制器，就发现它报错。 如图： 用脚手架创建的 react / vue 项目，已经集成了webpack，只要运行命令：npm run build 或 yarn run build 项目就会编译成功，生成一个dist文件夹，现在问题来了，如何启动这个编译后项目呢。 ...
react资源指向
Jasmine_jieer的博客
04-15 742
react资源指向 在react中，静态资源引用，使用相对路径，相对路径以src为根，引用动态资源是，使用绝对路径。绝对路径以public为根。jsx的前景图片根目录都指向public，jsx里面行间样式链接图片资源指向了public。 所以在jsx中，图片资源不是放在public目录下，而是放在public的其他同级目录下时，不管你用多少个../，都不能跳出根目录再去选择到public目录，同样，这时你即使把转换成行间样式的背景图片依旧是不可以的，根路径依旧还是指向public。 在这种情况下的话，引入的
react部署后接口请求返回You need to enable JavaScript to run this app.
热门推荐
weixin_44415764的博客
07-06 4万+
前端项目react + 后端jar + nginx部署 一. 问题 项目部署后，页面能正常访问，本机也能ping通服务器，后端jar也正常运行。 唯一不对劲的地方是，接口请求失败，且接口返回值为 You need to enable JavaScript to run this app. 二. 解决 因为前端调用了多个后端服务，有几个端口，所以在前端做了接口代理。 但是前端部署到nginx后，nginx又对前端做了代理，个人猜测是nginx无法对前端中的接口做二次代理，于是导致出现这个问题。 知道了问题
Ant Design Pro / umi 项目打包部署后刷新时URL多/的解决方案
qq_37904407的博客
10-20 451
Nginx配置更改http —> server 中修改location指令。增加配置 history: { type: ‘browser’ },删除配置 exportStatic: {},项目打包部署后刷新时URL多/的解决方案。项目修改config.[ts|js]
React 路由详解(超详细详解)
chen4565的博客
07-30 1万+
React React 路由 对SPA的理解 1.单页Web应用（single page web application，SPA）。 2.整个应用只有一个完整的页面。 3.点击页面中的链接不会刷新页面，只会做页面的局部更新。 4.数据都需要通过ajax请求获取, 并在前端异步展现。 路由的理解 1.什么是路由 1.一个路由就是一个映射关系(key:value) 2.key为路径, value可能是function或component 2.路由分类 1.后端路由： 1)理解： value是fun
React使用公共文件夹public
weixin_39782183的博客
03-09 5408
参考文章 在刚学React/Vue的时候，配合webpack脚手架学习的过程中，碰到一个问题会非常疑惑，比如在React中有个Public文件夹可以放静态资源，但是在src目录中同样有个assets文件夹，这个同样也是放静态资源的，这个就很困惑了，为何放置静态资源的地方会有两个？ 两者区别 其实放在两个文件夹区别就在于是否会被webpack所处理，如果您将文件放入该public文件夹，webp...
ERROR 22776 --- [reate-266142060] com.alibaba.druid.pool.DruidDataSource
最新发布
12-28
### 错误分析 在遇到 `ERROR 22776` 的情况下，通常意味着 Druid 数据源初始化过程中遇到了特定问题。根据描述中的错误信息以及提供的配置代码片段，可能的原因之一在于连接池验证查询未设置而启用了相应的检测功能。 当 `testWhileIdle` 设置为 `true` 并且没有指定 `validationQuery` 参数时，Druid 将无法执行必要的空闲连接有效性检查[^1]。这可能导致应用程序尝试使用无效或过期的数据库连接，进而引发各种异常情况。 另外，如果存在其他类型的错误码（如 errorCode 1698），则可能是由于权限不足或其他环境因素引起的连接失败问题[^3]。 ### 配置调整建议 为了修复上述提到的问题并确保 Druid 连接池能够正常工作，应当按照以下方式修改配置： #### 修改 druid.properties 文件 确保包含如下属性设定： ```properties druid.testWhileIdle=true druid.timeBetweenEvictionRunsMillis=60000 druid.minEvictableIdleTimeMillis=300000 druid.validationQuery=SELECT 'x' ``` 这里特别注意的是 `validationQuery` 属性，它用于定义一个简单的 SQL 查询语句来检验连接的有效性。对于 MySQL 数据库来说，推荐使用的验证查询是 `SELECT 'x'` 或者类似的简单 SELECT 语句。 此外，还可以考虑增加更多关于连接池管理的相关参数以优化性能表现，比如最大活跃数 (`maxActive`) 和最小闲置数量 (`minIdle`) 等等。 #### 测试类改进 考虑到当前测试程序仅打印了获得到的第一个连接实例，可以进一步扩展该例子以便更好地展示整个流程的工作状态。下面是一个增强版的例子： ```java public class DruidDemo { public static void main(String[] args) throws Exception { try (Connection conn = getDataSource().getConnection()) { System.out.println("Database connected successfully."); Statement stmt = null; ResultSet rs = null; String query = "select CURRENT_TIMESTAMP"; try { stmt = conn.createStatement(); rs = stmt.executeQuery(query); while(rs.next()){ System.out.println("Current timestamp from DB: "+rs.getString(1)); } } finally { if(stmt != null){ stmt.close(); } if(rs != null){ rs.close(); } } } catch (SQLException e) { e.printStackTrace(); } } private static DataSource getDataSource() throws SQLException{ Properties prop = new Properties(); prop.load(DruidDemo.class.getClassLoader().getResourceAsStream("druid.properties")); return DruidDataSourceFactory.createDataSource(prop); } } ``` 这段代码不仅展示了如何建立与释放资源的最佳实践，还通过实际执行一条SQL查询确认了数据库连接的状态良好。 ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值