GitHub Pages上的React应用-URL缺少存储库名称

时间:2018-12-24 07:58:39

标签: reactjs github-pages

我将图像保存在文件夹public/assets/img中。然后在类似这样的组件中使用它:

const imageUrl = "/assets/img/image.png"

在本地一切正常,但是在图像URL中的GitHub Pages上,我的存储库的名称以某种方式丢失了,所以代替了

http://name.github.io/my-repo/assets/img/image.png我得到http://name.github.io/assets/img/image.png

我正在遵循有关如何创建GitHub Pages构建的说明,并在package.json中添加了我项目的URL,即"homepage": "https://name.github.io/my-repo"

-编辑-

此外,我刚刚意识到,尽管路由似乎可以正常工作,但它也丢失了URL中的存储库名称,所以代替了

http://name.github.io/my-repo/subpage

http://name.github.io/subpage

我在这里想念什么?

1 个答案:

答案 0 :(得分:0)

好的,所以我以某种方式解决了我的问题,但是,我对解决方案并不满意:

解决URL问题(URL中缺少回购名称)

我已将basename属性添加到路由器<BrowserRouter basename="/repo-name">

缺点:首先,它看起来不太好硬编码。其次,npm start打开localhost:3000,现在它是空的。我必须添加我的仓库名称才能在本地打开应用程序,所以localhost:3000/repo-name-不太整齐。

修复图像问题(URL中也缺少回购名称,因此不显示图像)

我已将一个process.env.PUBLIC_URL变量添加到图像URL:const imageUrl = ${process.env.PUBLIC_URL}/assets/img/image.png。在本地环境中,它是空的,部署后它从homepage中获取package.json的{​​{1}}值

缺点:必须在组件中显示的每个图像之前添加https://name.github.io/repo-name

对于任何更好的解决方案,我将不胜感激!