React使用build生成项目:资源文件路径"/"修改为相对路径"."

React使用build生成项目:资源文件路径"/“修改为相对路径”."

一直想学习一个前端框架,看中react很久,最近终于对它下手了。在踩了js加载及渲染顺序的坑之后,发布也遇到了一个小坑,在这里记录一下

yarn build 指定相对路径

这里使用的是yarn build进行项目的打包,打包之后发现页面是空白的,所以就使用F12看了一下,一看console里的错误信息就发现是文件加载的路径不对,于是查看了script的路径都是以“/”开始的,使用搜索引擎查了一下,有的说改node_modules里的一个库的config的配置,显然这样的方式是不够优雅的,根据官方文档,获得了如下的解决方法:

注意:此功能随react-scripts@0.9.0更高版本提供。

如果您没有使用HTML5 pushState历史记录API或根本不使用客户端路由,则无需指定应用程序的URL。相反,你可以把它放在你的package.json:
“homepage”: “.”,
这将确保所有资产路径都相对于index.html。然后,您就可以将应用程序从中移动http://mywebsite.com到http://mywebsite.com/relativepath甚至http://mywebsite.com/relative/path无需重建。

即:在项目的package.json文件中增加一个节点“homepage”:&#

  • 6
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
对不起,但是React是一个JavaScript库,而不是一个Gradle项目。因此,React项目不会使用build.gradle文件。相反,你可以使用npm或yarn来管理React项目的依赖项和构建脚本。 如果你想创建一个React项目使用Gradle来构建和管理它,你可以创建一个多模块项目,其中一个模块用于托管你的React应用程序,而另一个模块用于构建和打包React应用程序。 下面是一个简单的示例,演示了如何使用Gradle来构建和管理React应用程序: 1. 创建一个多模块Gradle项目,包括两个模块:"backend"和"frontend"。 2. 在"backend"模块中,添加你的服务器端代码和逻辑。 3. 在"frontend"模块中,创建一个新的React应用程序。你可以使用Create React App工具来初始化一个新的React项目,并将其放在"frontend"模块的文件夹中。 4. 在"frontend"模块的build.gradle文件中,添加一些Gradle插件和配置,以便构建和打包你的React应用程序。例如,你可以使用Node插件来运行npm命令,并使用Copy任务将构建后的React文件复制到其他位置。 5. 运行Gradle任务以构建和打包你的React应用程序。例如,你可以运行"frontend:build"任务来运行npm run build命令并打包React应用程序。 请注意,这只是一个简单的示例,你可能需要根据你的项目需求进行更多的配置和自定义。希望这可以帮到你!如果你有任何其他问题,请随时问我。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值