react 项目打包二级目 使用BrowserRouter 解决页面刷新404 找不到路由

使用BrowserRouter

package 配置 (这部分代码可以不做配置也能实现)

复制代码
{
 "homepage": "/admin",
 }

vite.config 配置

复制代码
export default defineConfig({

	base: '/admin'

])

BrowserRouter 添加配置项

复制代码
<BrowserRouter basename='/admin'>
  <App />
</BrowserRouter>

nginx配置

复制代码
server {
  listen       80;
  server_name  www.demo.com;
  root         /var/www;
  index        index.html;
  location /admin{
    try_files $uri /admin/index.html;  # 重点,这里不是配置文件夹名称,而是代理路径名称
  }
}
相关推荐
是席木木啊7 小时前
RuoYi-Vue-Plus UI前端页面布局调整
前端·vue.js·ui
Web极客码9 小时前
WordPress 6.8有哪些新特性
前端·javascript·html
UXbot14 小时前
UI设计工具推荐合集
前端·人工智能·ui
码路星河14 小时前
基于 Vue + VueUse 的 WebSocket 优雅封装:打造高可用的全局连接管理方案
javascript·vue.js·websocket
摘星编程14 小时前
React Native + OpenHarmony:Accelerometer计步器代码
javascript·react native·react.js
敲敲了个代码14 小时前
如何优化批量图片上传?队列机制+分片处理+断点续传三连击!(附源码)
前端·javascript·学习·职场和发展·node.js
@AfeiyuO14 小时前
Vue 引入全局样式scss
前端·vue·scss
光影少年14 小时前
flex布局和grid布局区别,实现两边固定布局中间自适应
前端·css3·web·ai编程
全栈测试笔记15 小时前
异步函数与异步生成器
linux·服务器·前端·数据库·python
EndingCoder15 小时前
配置 tsconfig.json:高级选项
linux·前端·ubuntu·typescript·json