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”:".",或者是"./",当然,此功能是在react-scripts 0.9.0或者更高版本才支持的。
Papackage.json homepage
这样,打包的之后得到的html文件的资源文件的路径就是这样的了:
资源文件路径

拓展

为任意构建环境定制环境变量

您可以通过创建自定义.env文件并使用env-cmd加载它来创建任意构建环境。

例如,要为staging环境创建构建环境:

创建一个名为的文件.env.staging
像设置任何其他.env文件一样设置环境变量(例如REACT_APP_API_URL=http://api-staging.example.com

$ npm install env-cmd --save
$ # or
$ yarn add env-cmd

package.json使用新环境构建新脚本:

  "scripts": {
    "build:staging": "env-cmd .env.staging npm run build"
  }
}

现在,您可以npm run build:staging使用暂存环境配置来运行构建。您可以以相同的方式指定其他环境。

变量.env.production将用作后备,因为NODE_ENV将始终设置production为构建。

更多内容参考帮助文档,里面还包含了直接部署以及发布到github page的功能。

帮助文档

https://facebook.github.io/create-react-app/docs/deployment

发布了34 篇原创文章 · 获赞 18 · 访问量 12万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览