解决create-react-app build 后静态资源文件夹(static)路径不对

最新推荐文章于 2024-05-28 17:55:08 发布
最新推荐文章于 2024-05-28 17:55:08 发布
阅读量1.2w 收藏 1
点赞数 1
分类专栏： React 文章标签： 解决create-react-app build 后静态资源文件夹(s react打包报错 react静态资源路径
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Chad97/article/details/98729822
版权

Reason

  • 在我们对我们的react项目进行打包上线的时候可能我们的文件夹 build 并不是在更不了下，这样的情况就好出现服务器访问 index 找不到static 下面的资源，仔细看我们会发现访问路径变成了根文件
    例如：
www.test/build/static/cs.css
#  变成
www.test/static/cs.css

因为我们的webpack 默认以项目为根目录

homepage

  • 这时候就要我们制定我们的项目根目录 —— 在package.json中配置 homepage
    "homepage": "."

                

                
                
        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  $(薛定谔的喵)
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  3
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
azure-appservice-static：将静态站点部署到azure AppService

				
			

			

				

					01-29
				

			

		

		

			
				
要将Create React App生成的静态站点部署到Azure App Service，首先需要登录Azure CLI，然后创建一个新的Web应用资源。这可以通过以下命令完成：  ```bash az login az group create --name myResourceGroup --...

			
		

	



                

              
                



	

		

			

				
					
react-使用creatreactapp和antdesign构建的react项目

				
			

			

				

					08-14
				

			

		

		

			
				
在本文中，我们将深入探讨如何使用`create-react-app`和`ant-design`构建一个React项目，并结合Node.js创建一个静态文件服务器。`create-react-app`是Facebook提供的一个官方工具，用于快速搭建React应用，它自动...

			
		

	



                


  
              

                


	

		

			

				
					
react hooks项目中【前端路径、静态资源（js和图片）、后端接口】中添加一个路径的全过程

				
			

			

				

					BeSentimental的博客
				

				

					08-25
					
					665
					
				

			

		

		

			
				
*

			
		

	





	

		

			

				
					
react项目打包 npm run build后资源路径找不到，放在服务器二级子目录空白问题解决方法。部署后刷新404问题

				
			

			

				

					qq_42780323的博客
				

				

					11-08
					
					8334
					
				

			

		

		

			
				
1.项目完成后直接npm run build 后发现资源找不到，chunk.css,js等全部是报错。

解决办法，在page.json文件里面增加一行："homepage": "./",



2.由于项目不是直接放在服务器根目录，放在二级子目录，导致路由无法匹配。指向错误页面。或者空白。

解决方法：

react路由使用BrowserRouter ,里面增加一个属性basename，相当于基准url。不是默认的根路径

我的文件位置/WEB/reactdemo,

:打开页面浏览器显示的地址：htt.

			
		

	



		

			
		



	

		

			

				
					
《从零开始学习Vite》 第三章：静态资源处理

					
最新发布

				
			

			

				

					vettel的博客
				

				

					05-28
					
					1054
					
				

			

		

		

			
				
这一章我们将从如何加载静态资源和如何在生产环境中对静态资源进行优化来学习 Vite 怎么开箱即用的。

			
		

	





	

		

			

				
					
关于react-create-app 打包后路径报错问题

				
			

			

				

					weixin_34129696的博客
				

				

					05-31
					
					1003
					
				

			

		

		

			
				
使用create-app 默认打包的时候静态文件采用的是绝对路径，指向项目的根目录，但是我们的项目往往不是放在服务器的根目录下，这个时候可能会报错，这时候只需要在packge.json 中添加 "homepage": "." 即可，会用相对路径去打包

转载于:https://blog.51cto.com/13496570/2403405...

			
		

	





	

		

			

				
					
创建React项目时，出现create-react-app : 无法加载文件问题解决~~~~

				
			

			

				

					qq_16733389的博客
				

				

					07-06
					
					1087
					
				

			

		

		

			
				
问题描述：
create-react-app : 无法加载文件 C:\Users\cxk\AppData\Roaming\npm\create-react-app.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参
阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1

我们打开Windows PowerShell 并且以管理员身份运行
打开了命令行之后,输入set-Exec

			
		

	





	

		

			

				
					
React项目build之后资源文件路径不正确或打开空白页的问题及简易解决方法

				
			

			

				

					大IT职男日志
				

				

					09-09
					
					3092
					
				

			

		

		

			
				
找到node_modules -> react-scripts -> config -> paths.js

修改


function getServedPath(appPackageJson) {
 const publicUrl = getPublicUrl(appPackageJson);
 const servedUrl =
  envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');//改成'....

			
		

	





	

		

			

				
					
react打包后图片和资源路径错误的解决方法

				
			

			

				

					well2049的博客
				

				

					12-14
					
					9616
					
				

			

		

		

			
				
执行打包程序后yarn run build 
会看到多了一个build的文件夹。只需要把build文件夹部署到服务器即可访问。如果直接打开index.html就会报错，图片和资源加载不到。 
我直接把它放到IIS上，做测试后是没有问题。 
当然，如果你费用在本地访问，就手动把index.html里面的引用资源理解修改一下即可。也就是把【 /static 】前面的【/】 去掉，也可以访问到页面内容。

			
		

	





	

		

			

				
					
【react】脚手架build后，静态页面空白

				
			

			

				

					Voiceu的博客
				

				

					07-05
					
					974
					
				

			

		

		

			
				
有两个原因：

一是打包后的引用路径，是相对路径，在有服务器的情况下，是没有问题的，但是静态网页直接打开就会找不到资源
二是可能使用了BrowserRouter,要改为HashRouter
本人的两个问题都出现了
首先在package.json里面添加 “homepage” ： " . "

其次就是修改Router了
然后再build就行了


...

			
		

	





	

		

			

				
					
cra-apache-php-index-demo:如何通过create-react-app将index.php用作索引文件

				
			

			

				

					05-05
				

			

		

		

			
				
 `%PUBLIC_PATH%`应替换为实际的静态资源路径，这取决于你的Apache配置。  5. **配置Webpack**：虽然`create-react-app`通常不鼓励直接修改内部配置，但我们可以使用`eject`命令暴露配置，或者使用`react-app-...

			
		

	





	

		

			

				
					
react-ReactStaticReact的渐进式静态网站框架

				
			

			

				

					08-14
				

			

		

		

			
				
1. **安装和初始化**：通过`create-react-static-app`或手动克隆`react-static-react-static-95dcafa`这样的仓库来创建新项目。 2. **编写组件**：使用React编写页面组件，React Static 提供了`src/pages`目录来组织...

			
		

	





	

		

			

				
					
StaticHTML-to-React：在此存储库中，我将尝试如何将静态html模板转换为可重用的react组件，从而创建一个动态react应用

				
			

			

				

					02-09
				

			

		

		

			
				
Create React App入门 该项目是通过。 可用脚本 在项目目录中，可以运行： npm start  在开发模式下运行应用程序。 打开在浏览器中查看。  如果进行编辑，页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm ...

			
		

	





	

		

			

				
					
react最简单的新建方式--Create React App，（附文件路径问题解决的办法）

				
			

			

				

					qq_17451827的博客
				

				

					02-28
					
					3932
					
				

			

		

		

			
				
看了react官方文档，看到利用  Create React App 工具是新建react程序最好的方式。1.安装node.js6以上版本2.npm install -g create-react-app3.新建文件夹，在路径下执行create-react-app my-app进入my-app目录执行npm start4.创建之后目录结构为：my-app/
  README.md
  node_m...

			
		

	





	

		

			

				
					
关于react打包之后静态资源加载错误的问题

				
			

			

				

					admin9740的博客
				

				

					07-24
					
					2808
					
				

			

		

		

			
				
之前在打包react项目时发现一些问题，打包出来后我的一部分png图标加载不出来，开发者模式发现他们的路径中莫名其妙混入了我在react-router路由中使用<Browserrouter>的路由名称，网上看到有一种方法是使用Hashrouter，但我的一些功能不允许因此这个方式自然不行，但是我却发现另一个问题，同样的png图片为什么偏偏那几个出不来，我进入开发者模式发现另外...

			
		

	





	

		

			

				
					
react项目 前端加前缀(包括页面及静态资源)

				
			

			

				

					qq_20236937的博客
				

				

					07-15
					
					6391
					
				

			

		

		

			
				
react 前端加前缀(包括页面及静态资源)

			
		

	





	

		

			

				
					
React中下载静态资源文件

				
			

			

				

					TRTR666的博客
				

				

					12-26
					
					626
					
				

			

		

		

			
				
【代码】React中下载静态资源文件。

			
		

	





	

		

			

				
					
React 修改打包后静态资源引入路径：资源文件路径“/“修改为相对路径“.“

					
热门推荐

				
			

			

				

					大白的博客
				

				

					07-23
					
					1万+
					
				

			

		

		

			
				
问题：由于部署的时候增加了二级域名，但是打包后的index.html中引入的静态资源路径是从根目录引入的，其实在根域名下并没有这个静态资源，导致引入失败，无法加载，如下图所示



解决办法：

在package.json 里边增加该配置 （当然，配置的地址可以由部署环境决定，可以是 './' , 也可以是 ‘../’,根据需要配置即可）


"homepage":".",



修改完成后，打包后的index.html 的引入路径就如下图所示，


...

			
		

	





	

		

			

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

				
			

			

				

					weixin_36094484的博客
				

				

					05-14
					
					6088
					
				

			

		

		

			
				
发现create-react-app打包后路径css、js文件饮用路径不正确，在sf上网友提出直接修改package.json的homepage值为'.'即可。create-react-app打包后会在引用路径上加上homepage的路径部分。https://segmentfault.com/q/1010000009672497/a-1020000010815177...

			
		

	





	

		

			

				
					
create-react-app 安装vconsole

				
			

			

				

					01-13
				

			

		

		

			
				
根据提供的引用内容，可以通过以下步骤来演示如何在create-react-app项目中安装vconsole：  1. 首先，确保你已经在项目中安装了create-react-app。如果没有安装，可以使用以下命令进行全局安装： ```shell $ yarn ...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 3

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值