在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. ONNX模型分析与使用
			
    本文大部分内容为对 ONNX 官方资料的总结和翻译,部分知识点参考网上质量高的博客. 一,ONNX 概述 深度学习算法大多通过计算数据流图来完成神经网络的深度学习过程. 一些框架(例如CNTK,Caf ...
    
			
    2. 
						
  2. （6）go-micro微服务consul配置、注册中心
			
    目录 一 Consul介绍 1. 注册中心Consul基本介绍 2.注册中心Consul关键功能 3.注册中心Consul两个重要协议 二 Consul安装 1.使用docker拉取镜像 三 Conf ...
    
			
    3. 
						
  3. appium如何连接多台设备
			
    我们在做app自动化的时候,若要考虑兼容性问题,需要跑几台设备,要是一台一台的跑比较耗 时,因此需要考虑使用多线程来同时操作多台设备. 1.我们拿两台设备来模拟操作下,使用:adb devices查看 ...
    
			
    4. 
						
  4. 欠你们的 → k8s 集群搭建，除夕奉上！
			
    开心一刻 有一天,qq收到一个好友申请,验证消息上写的是:哥哥加我,我是妹妹 我以为是性骚扰,就没加,直接回了一句:我喜欢少妇 过了一会儿,姑姑就给我打了个电话:你妹妹qq加你,你怎么不同意,她想问你 ...
    
			
    5. 
						
  5. 洛谷P3654 First Step题解
			
    这是一道暴力枚举. 大致题意:R行C列的棋盘要放下长度为K的线段,"#"表示无法放置,问有多少种放置方法. 直接贴代码: #include<bits/stdc++.h> ...
    
			
    6. 
						
  6. element-ui + vue ,ant-design + vue , Angular + ZORRO 实现表格自动横纵向合并单元格，并自动根据单元格数据进行添加样式
			
    element-ui + vue ,ant-design + vue , Angular + ZORRO 实现表格自动横纵向合并单元格,并自动根据单元格数据进行添加样式 本文重点写 element-u ...
    
			
    7. 
						
  7. npm 中设置环境NODE_ENV变量，判断失败打印process.env.NODE_ENV确实是"development",但是判断process.env.NODE_ENV === "development" 是false
			
    通过package.json 的scripts脚本 修改NODE_ENV的值来区分开发环境和生产环境. "scripts": { "build": " ...
    
			
    8. 
						
  8. 迁移学习（ADDA）《Adversarial Discriminative Domain Adaptation》
			
    论文信息 论文标题:Adversarial Discriminative Domain Adaptation论文作者:Eric Tzeng, Judy Hoffman, Kate Saenko, Tr ...
    
			
    9. 
						
  9. 分布式协议与算法-Raft算法
			
    本文总结自:极客时间韩健老师的分布式协议与算法实战课程. 大家都知道,Raft算法属于Multi-Paxos算法,它是在Multi-Paxos思想的基础上,做了一些简化和限制.关于Paxos算法,博主 ...
    
			
    10. 
						
  10. 我们从 CircleCI 安全事件获得的3个经验教训
			
    CircleCI 作为业内最受欢迎的 CI/CD 平台提供商之一,有超过20万个 DevOps 团队使用其平台.该公司在今年1月在其官网报告了一起安全事件引起客户恐慌.在此事件中,有身份不明的恶意攻击 ...
    
			
    11.