js修改地址栏url_在gulp、create-react-app中css,js中的文件路径
我们的项目HTML文件单独放在一个服务器上,静态资源js、css、images放在我们的静态资源服务器上,这样部署后会出现一个问题,css文件中的图片相对路径,在html的服务器上就会变成
//html文件的地址
http://nb.weiboyi.com
html入口文件在php的服务器中;
js,css,image在单独的cdn上,存在一个问题,就是css文件中引用图片的路径是相对路径,但是服务器发起请求时相对路径是根据浏览器地址栏的location路径;这就存在一个问题,location的路径下没有对应的image资源:
解决方案:
类似webpack的解决方案,将小图片通过base64打包到css文件中;将大文件的路径替换成全路径。
这里又出现一个问题,我们的静态资源路径是动态的,每次发布会生成一个版本号;
cdn.xxx.com/static/xxx_version/css/main.css;
解决办法,就是将cdn的路径,设置成环境变量,通过环境变量替换css文件中的路径。
下面是gulp的配置方式。
function
这样做是因为我们的项目是老项目了,没有使用模块化开发的方式写代码;所以只能使用gulp这样的构建工具;
create-react-app解决这个问题:
// 在命令行使用 linux,macos;命令行写的好处是可以通过jenkins注入
PUBLIC_URL=http://cdn.weiboyi.com npm build//在.env.development文件中写也可
background:url(process.env.PUBLIC_URL)
在webpack中的配置,
module.exports = {...output: {...publicPath: publicPath, }...
}
js修改地址栏url_在gulp、create-react-app中css,js中的文件路径相关推荐
- js修改地址栏url_不同寻常的地址栏过渡
前几天,我在推特上看到这样一张图. 原来地址栏还能这么玩,瞬间就觉得自己弱爆了.然后我决定去实现一下这个效果,然后做成一个库. 画了一个晚上,终于做好了.这是最后的成果. 这个库使用非常的简单. 你只 ...
- 如何使用Create React App DevOps自动化工作中所有无聊的部分
by James Y Rauhut 詹姆士·鲁豪(James Y Rauhut) 如何使用Create React App DevOps自动化工作中所有无聊的部分 (How I automate al ...
- react快速开始(二)-使用脚手架Create React App创建react应用
文章目录 react快速开始(二)-Create React App入门 什么是Create React App 快速开始 使用IDE webstrom创建react项目 create react a ...
- Create React App proxy配置
最近又吃了没文化的亏(哭晕在洗手间≧ ﹏ ≦) 做后台管理系统的时候,需要调一个易连云打印小票的接口, 项目框架是 Create React App+typescript,后端是node.js 本媛负 ...
- 深入浅出 Create React App
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
- Vite 3.0 vs. Create React App:比较和迁移指南
Create React App (CRA) 在 React 社区及其整个生态系统的发展中发挥了关键作用. 在突发奇想构建本地 React 开发环境时,它是不同技能的开发人员的首选工具. CRA 拥有 ...
- 【翻译】基于 Create React App路由4.0的异步组件加载(Code Splitting)
基于 Create React App路由4.0的异步组件加载 本文章是一个额外的篇章,它可以在你的React app中,帮助加快初始的加载组件时间.当然这个操作不是完全必要的,但如果你好奇的话,请随 ...
- 在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] 本文演示了如何将 Crea ...
- Create React App 2.0 正式发布:Babel 7、webpack 4 等
英文原文:Create React App 2.0: Babel 7, Sass, and More – React Blog 以下是简要翻译 React 本身是没有附带任何编译工具的,如果没有测试运 ...
最新文章
- HTML5 Boilerplate - 让页面有个好的开始
- 基于口令的密码PBE(Password Based Encryption)
- 【干货·课程】言有三的深度学习从入门到上线课程
- 3.Lucene3.x API分析,Director 索引操作目录,Document,分词器
- 显示器选三星还是飞利浦_如何为飞利浦色相灯设置计时器
- hdu4353 Finding Mine三角形内的点数
- leetcode896. 单调数列
- 【算法】java 用 数组 模拟 队列
- H3C实验室Vlan的简单运用
- 《深入理解计算机系统》读书笔记(ch1)
- mybatis3的中文官方文档
- idea中 Java xml注释缩进问题 解决方案
- MATLAB和C语言的区别
- 【Python】网络爬虫
- PCB测试流程分析介绍
- 头歌Python,7号的,作业,
- 聚合微信聊天crm调用代码
- 个人博客制作——其他页面
- win10开机右下角网络图标突然变成小地球,显示无internet连接,但是可以正常上网
- 微信小程序图片分包 || 微信小程序资源分包