美文网首页
create-react-app打包上线页面空白的问题

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

作者: 忘了叫啥咋滴这个名称还被占用了 | 来源:发表于2020-11-20 15:30 被阅读0次

场景:
在用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"
        }
      ]
    ]
  }
}

相关文章

网友评论

      本文标题:create-react-app打包上线页面空白的问题

      本文链接:https://www.haomeiwen.com/subject/dygdiktx.html