美文网首页
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