场景:
在用create-react-app
创建了一个项目,
开发完成后,打包上线的后,发现线上环境,打开页面空白
本地直接file://
协议预览和在本地开启web服务器预览,都是空白
问题:
1.项目用的是BrowserRouter
,BrowserRouter
一般是用于服务端渲染,所以服务端也需要相应的配置。要不然 网关不知道你有哪些路由,怎么给你转发。
解决:
1.BrowserRouter
换成 HashRouter
打包后,发现在本地开启web服务器预览后,正常,但是放在服务器上后,依然为空白,提示静态资源找不到。
解决:
配置package.json
中的homepage:'./'
这样可以使打包后的静态资源,采用相对路径。
问题:
2.自己配置了webapck.config.js
,但是无效
解决:
create-react-app
创建的项目,内置了webapck
的配置。运行npm run ejext
,会出现配置文件,在配置文件中修改,才可奏效
问题:
- 运行了
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"
}
]
]
}
}