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

Posted 2023-04-24

参考技术A 场景：
在用 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 后， jsx 运行时的 webpack 的配置会被删除掉。在 package.json 中，添加如下配置即可

如何解决vue/react打包上线之后路由页面刷新就丢失的问题

location /{
   try_files $uri /index.html;
   index index.html index.htm index.php;
}

通过服务器的nginx配置进行url重写到程序入口index.html,代码如上