create-react-app打包上线页面空白的问题

场景:
在用create-react-app创建了一个项目,
开发完成后,打包上线的后,发现线上环境,打开页面空白
本地直接file://协议预览和在本地开启web服务器预览,都是空白

问题:
1.项目用的是BrowserRouterBrowserRouter一般是用于服务端渲染,所以服务端也需要相应的配置。要不然 网关不知道你有哪些路由,怎么给你转发。

解决:
1.BrowserRouter 换成 HashRouter
打包后,发现在本地开启web服务器预览后,正常,但是放在服务器上后,依然为空白,提示静态资源找不到。
解决:
配置package.json中的homepage:'./'
这样可以使打包后的静态资源,采用相对路径。

问题:
2.自己配置了webapck.config.js,但是无效
解决:
create-react-app创建的项目,内置了webapck的配置。运行npm run ejext,会出现配置文件,在配置文件中修改,才可奏效

问题:

  1. 运行了npm run eject 后,再运行 npm start,报错“React is not defined”
npm run eject
npm start

解决:
运行了npm run eject后,jsx运行时的webpack的配置会被删除掉。在package.json中,添加如下配置即可

{
  "babel": {
    "presets": [
      [
        "react-app",
        {
          "runtime": "automatic"
        }
      ]
    ]
  }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容