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

查找到到"private": true,在后面添加 homepage，如下
"homepage":"./", // react-scripts 版本需要高于 0.9.0

打包后的文件在html中的引入路径
打包前："/static/js/main.0a7a0f49.js"
打包后："./static/js/main.0a7a0f49.js"






 
												


											
react修改打包后css,js,src引入的静态地址路径修改的更多相关文章
	

    
						
  1. webpack入门之打包html,css,js,img(一)
		
    webpack到底是什么,网上一大堆介绍的东西,越看越不知道说的什么,所以今天打算自己来记录一下这段时间学习webpack的成果, webpack就是打包文件用的,html,css,js,img,为什 ...
    
		
    2. 
						
  2. 配置webpack中externals来减少打包后vendor.js的体积
		
    在日常的项目开发中,我们会用到各种第三方库来提高效率,但随之带来的问题就是打包后的vendor.js体积过大,导致加载时空白页时间过长,给用户的体验太差.为此我们需要减少vendor.js的体积,从本 ...
    
		
    3. 
						
  3. vue-cli3抽离配置文件,动态修改打包后配置
		
    由于项目有外部部署需求,对不同的环境前端调用后台的地址不一样,且不能提前预知必须到部署现场后才能确定后端地址,故需要将调用后端相关的配置抽离到文件中,打包后部署人员在方便现场修改. 思路如下: 1.由 ...
    
		
    4. 
						
  4. vue build打包后css里的图片路径404不正确的问题
		
    vue build打包后css里的图片路径404 在vue-cli项目中build/utils.js中找到如下代码块,添加 publicPath:’../../’ if (options.extrac ...
    
		
    5. 
						
  5. 当碰到需要调试打包后的js
		
    在react中经常开发碰到不能热更中进行调试的,如IE之类的 这个时候我们就需要打包才能运行看到效果, 但是往往每次打包都需要很长的时间: 这个时候我们就可以直接找到打包后的文件,直接在改文件中修改: ...
    
		
    6. 
						
  6. vue-cli构建的vue项目打包后css引入的背景图路径不对的问题
		
    使用vue-cli构建vue项目后,再打包遇到一个css引入的背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常 ...
    
		
    7. 
						
  7. vue webpack 打包后css背景图路径问题
		
    最近在写vue-webpack项目时,打包后遇到了css背景图片路径报错的问题 奇怪的是,通过img标签引入的图片路径却没有问题,看来是webpack在打包后,读取css中图片的相对路径出错了. 稍微 ...
    
		
    8. 
						
  8. vue webpack打包后.css文件里面的背景图片路径错误解决方法
		
    资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static ...
    
		
    9. 
						
  9. vue打包后空白页问题全记录 （background路径，css js404，jsonp等）；
		
    总结一下vue打包后问题全记录:大部分开发者webpack基本上都是拿来就用的(并没有系统化的研究). 一 >>> 打包之后的静态文件不能直接访问:(例如dist)打包后搭个服务器才 ...
    
		
    10. 
						
  10. 关于npm run build打包后css样式中的图片失效的问题(如background)
		
    平时run dev都能正常显示的css背景图片在npm run build打包后竟然不显示了(写在标签对中的图片都可以正常显示),而且dist/static/img目录下是确实有这张图片的,于是查看打 ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. [WPF]C#调用C++代码（通过C++/CLI）
			
    用途 通过使用C++ + Opencv 编写算法,然后用WPF(C#)编写程序界面,实现交互 可以参考MSDN文档:https://docs.microsoft.com/en-us/cpp/windo ...
    
			
    2. 
						
  2. MySQL 插入数据 数据重复 从另一个表导入数据
			
    当使用MySQL插入数据时,我们可以根据需求选择合适的插入语句. 一.方法分类 二.具体方法 使用场景 作用 语句 注意 常规插入 忽略字段名 insert into 表名 values (值1, 值 ...
    
			
    3. 
						
  3. Linux音频采集和在国产化平台中遇到的坑（一）
			
    Linux音频采集和在国产化平台中遇到的坑(一) 最近在做一个国产化平台的软件项目的开发,是基于国产芯片的银河麒麟系统.其中有一个重要模块,是采集和播放音频数据,播放不用多说了,采集的话,包括采集麦克 ...
    
			
    4. 
						
  4. Git【初次提交内容（代码）到新创建的远端仓库】
			
    哈喽大家好,转眼到了年后了.年都过完了,就要开始工作了啊.那今天给大家带来的是(题目).因为从实习期开始,就一直用SVN,即使是使用Git的时候,也用了Sourcetree工具.直到最近打算和朋友(兮 ...
    
			
    5. 
						
  5. SqlServer服务中利用触发器对指定账户进行登录ip限制提升安全性
			
    转眼间上次写文章已经是 2022年12月15日的事情啦,本来从2022年7月份开始写作之后保持着每周一篇,然而从12月15日后断更了这么久,经历了,隔离.阳.过年.从今天开始继续坚持写作,本片文章给大 ...
    
			
    6. 
						
  6. 【Android 4.4】内存文件系统（tmpfs）的创建与使用
			
    前言说明 某些情况下,需要缓存一些文件到磁盘中,我们可以借助 tmpfs 文件系统,来提升读写缓存文件的速度,并且也可以避免频繁读写缓存文件所带来的对 flash 的寿命影响. 使用方法 通过 mkd ...
    
			
    7. 
						
  7. 快速上手python的简单web框架flask
			
    目录 简介 web框架的重要组成部分 快速上手flask flask的第一个应用 flask中的路由 不同的http方法 静态文件 使用模板 总结 简介 python可以做很多事情,虽然它的强项在于进 ...
    
			
    8. 
						
  8. 1888: 生成括号（等级考试3级 2021-09 T5）
			
    题目: 程序: #include<bits/stdc++.h> using namespace std; int n; string s1; void dfs(int l,int r) { ...
    
			
    9. 
						
  9. org.springframework.web.filter.CharacterEncodingFilter cannot be cast to javax.servlet.Filter异常
			
    转:https://blog.csdn.net/u010670689/article/details/40301043 使用maven开发web应用程序, 启动的时候报错: jar not loade ...
    
			
    10. 
						
  10. require.context 自动引入指定目录下的文件、组件、reducer
			
    1. 语法:let  webpacks = require.context (directory,useSubdirectories,regExp)  (directory:"文件路径&qu ...
    
			
    11.