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

最新推荐文章于 2024-05-08 16:12:42 发布
最新推荐文章于 2024-05-08 16:12:42 发布
阅读量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
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
create-react-app之部署方式

				
			

			

				

					蛐蛐的博客
				

				

					01-12
					
					537
					
				

			

		

		

			
				
1.简介



npm run buildbuild使用应用的生产版本创建目录。

设置您喜欢的HTTP服务器，以便为您网站的访问者提供服务index.html，并向静态路径/static/js/main.<hash>.js等请求提供文件内容/static/js/main.<hash>.js。



2.静态文件服务器



对于使用Node的环境，处理此问题的最简单方法是安装serve并让其处理其余部分：


npm install -g serve
serve -s ...

			
		

	



                

              
                



	

		

			

				
					
前端系列总结-框架篇（1）Create-React-App

				
			

			

				

					a1v0id的博客
				

				

					07-12
					
					349
					
				

			

		

		

			
				
前端系列总结-框架篇（1）Create-React-Appcreate-react-app的介绍、安装和使用安装和使用项目的目录结构项目的个性化配置添加项目路径别名接口代理转发在HTML模板中动态插入js文件利用public静态目录插入项目中添加动态的js文件
create-react-app的介绍、安装和使用
create-react-app是React团队推出的一款用于生成react项目的脚手架工具，可以实现零配置开发react的单页面应用。
安装和使用
一般来说都是使用npm全局安装，前提条件是已经配

			
		

	



                


  
              

                


	

		

			

				
					
React零基础入门到项目实战之脚手架create-react-app搭建React项目

				
			

			

				

					panpan_Yang的博客
				

				

					08-07
					
					264
					
				

			

		

		

			
				
脚手架 create-react-app  react应用程序 react项目

			
		

	





	

		

			

				
					
react create-react-app v5 从零搭建项目（不暴露 eject）_create-react-app 搭建移动端h5

					
最新发布

				
			

			

				

					2401_84438160的博客
				

				

					05-08
					
					788
					
				

			

		

		

			
				
public目录是在创建React应用时默认生成的，用于放置一些通用的静态资源，如HTML文件、favicon.ico文件等。Babel 默认配置：Create React App v5 的默认 Babel 配置中使用了 @babel/preset-env，它会根据目标浏览器的兼容性要求，自动转译代码并进行 Tree Shaking。在 Create React App v5 的构建配置中，通过使用 Babel 和 webpack 的相关插件和配置，可以自动启用 Tree Shaking 功能。

			
		

	



		

			
		



	

		

			

				
					
react create-react-app v5 从零搭建（使用 npm run eject）

				
			

			

				

					从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
				

				

					09-28
					
					3946
					
				

			

		

		

			
				
好久没用 create-react-app做项目了，这次为了个h5项目，就几个页面，决定自己搭建一个（ps:mmp 好久没用，搭建的时候遇到一堆问题）。我之前都是使用 umi。后台管理系统的项目 使用 antd-pro框架。实际上antd-pro 是基于umi搭建集成的框架。里面封装好了各种东西，开箱即用。

			
		

	





	

		

			

				
					
create-react-app打包后修改static命名（避免和服务器static文件命名重复导致访问资源404）

				
			

			

				

					张鹏~IT~少年人的博客
				

				

					05-09
					
					3439
					
				

			

		

		

			
				
npm run eject 后， 	在config文件夹下的webpack.config.js查找 static，批量assets（替换想要输出的命名即可）



			
		

	





	

		

			

				
					
（转）create-react-app入门教程

				
			

			

				

					CaseyWei
				

				

					06-11
					
					687
					
				

			

		

		

			
				
Create React App是FaceBook的React团队官方出的一个构建React单页面应用的脚手架工具。它本身集成了Webpack，并配置了一系列内置的loader和默认的npm的脚本，可以很轻松的实现零配置就可以快速开发React的应用。

Quick Start（快速入门）

全局安装

首先确保你电脑上安装最新的




# 全局安装
npm install -g create-react-app
# 构建一个my-app的项目
npx create-react-app my-app
c.

			
		

	





	

		

			

				
					
React脚手架 create-react-app 的安装及使用

				
			

			

				

					Dark_programmer的博客
				

				

					03-03
					
					1526
					
				

			

		

		

			
				
React 脚手架
create-react-app
关于react项目的创建，我们当然可以手动进行搭建，但如果项目不是特别复杂，推荐使用creater-react-app进行项目的搭建。由Facebook官方开发。用create-react-app生成的项目的目录结构是比较简洁的。
全局安装脚手架create-react-app
npm install -g create-react-app

...

			
		

	





	

		

			

				
					
react开发脚手架create-react-app

				
			

			

				

					周亮
				

				

					09-11
					
					754
					
				

			

		

		

			
				
1、首先基于npm在全局安装create-react-app


$ npm install -g create-react-app


2、在指定目录中创建一个react项目工程


$ create-react-app my-app

my-app是自己设置的项目名称（遵循npm模块发布时的要求，例如：名字中不能出现大写字母或者汉字以及特殊字符等）


3、进入到指定的项目文件，启动项目


...

			
		

	





	

		

			

				
					
如何使用Create-React-App和自定义服务人员构建PWA

				
			

			

				

					
				

				

					07-26
					
					481
					
				

			

		

		

			
				
Note: This is not a primer on create-react-app or what a service worker is. This post assumes prior knowledge of both. 注意：这不是create-react-app或服务工作者的入门。 这篇文章假定两者都有先验知识。 
So, I recently had the opportun...

			
		

	





	

		

			

				
					
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应用，它自动...

			
		

	





	

		

			

				
					
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中使用Mockjs进行接口数据模拟

					
热门推荐

				
			

			

				

					Chad97的博客
				

				

					05-13
					
					1万+
					
				

			

		

		

			
				
引子

每个改进都是为了解决问题。
现在我在开发中碰到了问题，我先描述下问题：
我们现在做前后端完全分离的应用，前端写前端的，后端写后端的，他们通过API接口连接。
前端同学心理路程：“后端同学接口写的好慢，我都没法调试了。”
是不是有这个问题呢？一般我们怎么解决？
第一种：自己这边随便造点数据，等后端接口写好了之后，再小修改,再调试。
第二种：想想我们之前获得用户信息的dist/api/user...

			
		

	





	

		

			

				
					
React实现数据双向绑定

				
			

			

				

					Chad97的博客
				

				

					03-03
					
					1万+
					
				

			

		

		

			
				
React手动实现数据双向绑定


和vue 相比 react 并没有提供向 v-model 这样的指令来实现文本框的数据流双向绑定，因为react的设计思路就是单向数据流，所以我们需要借助 onChange 和 setState 来实现一个双向的数据流


实现思路大致如下：↓



如这样一个 input
&lt;input ref="txt" onChange={ (e)=&gt;this....

			
		

	





	

		

			

				
					
Redux and React-redux 莞式教程（新手必看）

				
			

			

				

					Chad97的博客
				

				

					04-25
					
					8977
					
				

			

		

		

			
				
Redux and React-redux 莞式教程（新手必看）

为了方便使用者使用，这里就redux和react-redux 一并讲究使用了，会了react-redux，redux也就没问题了，只不过稍微封装了一下

教程方式


我们先讲理论，先明白  render、action、 store 、connect 、 dispatch 、{ mapStateToProps  mapDispat...

			
		

	





	

		

			

				
					
create-react-app 安装vconsole

				
			

			

				

					01-13
				

			

		

		

			
				
根据提供的引用内容，可以通过以下步骤来演示如何在create-react-app项目中安装vconsole：

1. 首先，确保你已经在项目中安装了create-react-app。如果没有安装，可以使用以下命令进行全局安装：
```shell
$ yarn global add create-react-app
```

2. 创建一个新的create-react-app项目：
```shell
$ create-react-app react-demo
```

3. 进入项目目录：
```shell
$ cd react-demo
```

4. 安装vconsole依赖：
```shell
$ yarn add vconsole
```

5. 在项目的入口文件（通常是src/index.js）中引入vconsole：
```javascript
import VConsole from 'vconsole';

// 初始化vconsole
new VConsole();
```

6. 运行项目：
```shell
$ yarn start
```

现在，你的create-react-app项目中已经成功安装并使用了vconsole。



			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 3

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值