React布署打包到服务器上后,页面显示空白
项目路由用的是BrowserRouter,部署后打开报错或显示空白,可以参考以下解决问题方法
- 1、在package.json中添加homepage
{
"name": "demo",
"version": "1.0.0",
"homepage": "./",
...
}
- 2、BrowserRouter需要配置basename
- Configure you application to run underneath a specific basename in the URL:
import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import App from '@/App'
import reportWebVitals from './reportWebVitals'
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
<React.StrictMode>
// folder你的部署文件夹
<BrowserRouter basename="/folder">
<App />
</BrowserRouter>
</React.StrictMode>
)
reportWebVitals()
- 3、nginx配置(nginx.conf)
try_files $uri $uri/ /index.html