react部署之页面空白

问题:create-react-app build打包后,页面出现空白。

可能一:

控制台报错,js等文件找不到(404)

文件路径问题,只需修改package.json文件,添加

"homepage":".",

位置:

可能二:

如果添加后没有报错,但还是页面空白。可尝试将文件部署在服务器根目录上,如果根目录可以打开,即可能是服务代理问题

检查BrowserRouter的basename属性

<BrowserRouter basename='/myDemos/build/'>
<Switch>
<Route path="/" component={HomeRoute}/>
</Switch>
</BrowserRouter>

该属性设置静态部署路径,如上代码中build文件夹下放置打包好的文件

本项目使用BrowserRouter,如使用hashrouter请自行百度

钻研不易,转载请注明出处...

react部署之页面空白的更多相关文章

  1. vue 项目build后部署上去页面空白

    默认情况下vue-cli 会认为项目是部署在域名的根路径上. 但是当项目被部署到了一个子路径上,就要自己选定子路径. 比如项目被部署在了 https://www.ujapp.com/my-app, 则 ...

  2. Flex 页面空白或Error #2032

    日前用flex.arcgis做了一个地图显示的页面,本机调试没题目,公布后放到用户办事器上(win2003,ie6)ie6显示页面空白,换搜狗浏览器显示Error #2032,只显示进度条,客户端用i ...

  3. Prestashop 页面空白

    Advanced Parameters > Performance页面空白,无任何提示错误,解决方法: 更改文件/cache/class_index.php 权限为666

  4. IE下必须点击一下页面空白的地方才可以激活onchange事件

    checkbox在IE下必须点击一下页面空白的地方才可以激活onchange事件. 解决办法把onchange换成onclick

  5. jupyter-notebook后home页面空白问题

    jupyter-notebook后home页面空白问题 解决方案1   更换默认的浏览器,选择谷歌浏览器,很多360打不开的页面,更换谷歌后都能有效解决,并且确保是最新版本的google浏览器. 解决 ...

  6. 在CentOS 上搭建nginx来部署静态页面网站

    在centOs 上搭建nginx来部署静态页面网站 一.部署服务器环境 nginx:轻量级.高性能的HTTP及反向代理服务器,占用内存少,并发能力强,相比老牌的apache作为web服务器,性能更加卓 ...

  7. React Router v4 页面传值的三种方法

    传值方法 1.props.params 使用React router定义路由时,我们可以给指定一个path,然后指定通配符可以携带参数到指定的path: <Route path='/user/: ...

  8. ionic在ios侧滑页面空白 禁用视图滑动后退

    本人在ios10左右滑动的时候,经常出现左滑页面后退,然后整个页面空白现象,只能强行退出,并重新登录,最简单的方法就是禁用侧滑后退这个功能: 在app.js上config增加如下: $ionicCon ...

  9. Struts1 不能进入Action,页面空白问题解决

    http://blog.csdn.net/barry_liao/article/details/35592935 Struts1 不能进入Action,页面空白问题解决 标签: Struts1Acti ...

随机推荐

  1. (8)propetry装饰器

    propetry是一个内置函数,用来将一个功能伪装成一个数据属性 property将一个方法伪装成一个数据属性class People: def __init__(self,name,height,w ...

  2. hdu1255 覆盖的面积 线段树-扫描线

    矩形面积并 线段树-扫描线裸题 #include<stdio.h> #include<string.h> #include<algorithm> #include& ...

  3. 无法对 数据库'XXXXX' 执行 删除,因为它正用于复制

    无法对 数据库'XXXXX' 执行 删除,因为它正用于复制. (.Net SqlClient Data Provider) 使用以下方式一般可以解决 sp_removedbreplication 'X ...

  4. KindEditor 上传文件 在Asp.net中的使用

    以前一直用FCK编辑器,因为配置比较简单,但是发现Kindeditor这个编辑器更加好看,更加灵活,就用了下. 但是发现在上传文件的时候,出现了大问题,弄了我好久的时间,为了记录下,或许能帮助到您,共 ...

  5. Javascript 的严格模式 use strict

    严格模式 "use strict"; x = 5; 这时浏览器会报错.

  6. some ideas

    1. 3d camera h/w: 单反+projector s/w: 抓图 -> 3d成像 -> 3d显示 -->  3d编辑(?具体要那些功能)--> to 3d prin ...

  7. datacolumn 表达式 除数为0

    dt.columns.add("avgp",typeof(decimal),"IIF(qty=0,0,price/qty)")

  8. Date类型之组件方法

    在之前总结了Date类型的继承方法和格式化方法,现在来总结一下日期时间组件方法,这些方法都是直接取得和设置日期值中特定部分的方法. var d = new Date(); //getDate() 从 ...

  9. Appscan_web安全测试工具 (含修改启动浏览器的方法)

    安全测试应该是测试中非常重要的一部分,但他常常最容易被忽视掉. 尽管国内经常出现各种安全事件,但没有真正的引起人们的注意.不管是开发还是测试都不太关注产品的安全.当然,这也不能怪我们苦B的“民工兄弟” ...

  10. [转]Oracle 中计算时间间隔的SQL 语句

    ' second as TSec from dual -- 计算 60秒 前的时间 ' minute as TMin from dual -- 计算 10分 前的时间 ' hour as UTCTim ...