Umi&React打包部署到非根目录及刷新报错404的问题解决-w3h5-Web前端开发资源网
w3h5-Web前端开发资源网
首页 经验总结 前端生活 前端资讯 JavaScript PHP笔记 HTML笔记 微信小程序 SEO资料 精品种草 工具插件 API手册 图片变灰 常用网址 科技圈 联系我们 捐助名单
百度
谷歌
Q Q
RSS订阅
捐助名单
收藏本站
登陆
当前位置：w3h5-Web前端开发资源网 > 经验总结 > Umi&React打包部署到非根目录及刷新报错404的问题解决
Umi&React打包部署到非根目录及刷新报错404的问题解决
Deshun 发布于 2年前 (2021-08-01)
分类：经验总结
2285℃
评论(0)
百度已收录
在开发中可能一个项目包含多个子项目，如前端项目和后台管理的项目放在同一个服务器目录中。前端项目地址是 www.w3h5.com ，后台管理项目地址是 www.w3h5.com/admin 。这样会遇到一个问题，本地开发是好的，部署后就没反应了，页面无法正常打开，而且没有报错？没有报错！ 这是应用部署在非根路径的典型现象。为啥会有这个问题？因为路由没有匹配上，比如你把应用部署在 /xxx/ 下，然后访问 /xxx/hello，而代码里匹配的是 /hello，那就匹配不上了，而又没有定义 fallback 的路由，比如 404，那就会显示空白页。可通过配置 base 解决，找到配置文件 /.umirc.ts 添加如下配置。export default defineConfig({
base: '/path/ourAppRoot',
// ...
};也会遇到首页可以打开，比较输入路由地址就打不开了，在首页点击菜单可以访问，但是刷新就又不行了。这时需要修改一下服务器的配置，以 Nginx 为例：（Nginx配置文件位置为/etc/nginx/nginx.conf）server {
# ...
location / {
# ...
# 增加下列命令， index.html 可换为项目中使用的其它文件名
try_files $uri $uri/ /index.html;
}知识扩展：Nginx 的 try_files 命令的使用方式有两种：try_files file ... uri;
try_files file ... =code;该命令用于根据指定的参数依次检查寻找对应的文件，若所有文件都找不到将会在内部重定向至最后一个参数指定的文件。当使用 =code 时，代表若找不到对应的文件将返回 code 对应的错误。$uri 代表请求的文件及其路径，$uri/ 表示对应路径的目录。例如请求 http://example.com/page 时，$uri 表示资源目录下是否存在名为 page 的文件，$uri/ 表示名为 page 的目录。所以，我们在配置文件中增加的命令表示接收到请求时先寻找 uri 对应的文件或目录，若不存在则返回 index.html 文件。未经允许不得转载：w3h5-Web前端开发资源网 » Umi&React打包部署到非根目录及刷新报错404的问题解决
赞 (0)
分享到：
标签：Umi React React刷新404 React非根目录打包 React自定义目录 React刷新报错 React打包 Nginx
相关推荐
React 新官网发布，开发文档更全面更易用Ant Design Pro项目请求接口报错：enable Javascript 解决React map 逗号的解决方法Umi动态修改路由跳转redirect配置
评论 沙发
换个身份
添加评论
*昵称
昵称 (必填)
邮箱
邮箱 (选填)
*验证码
Deshun
优化property=og标签，让你的网站在搜索引擎面前更优雅Ant Design的DatePicker日期组件不可选日期实现，让New Bing优化代码太棒了无界微应用访问Next.js项目跨域问题的解决方案ChatGPT竞品Google bard开启公测，这些国家可以申请，比New Bing更简单LF和CRLF换行符不一致导致的Git显示修改问题分析及解决React 新官网发布，开发文档更全面更易用
站点动态
本站已启用IPV6支持！
本站已启用https，访问遇到问题可联系我反馈。
新增百度/谷歌搜索：结果更全、更灵活。
广告投放：　
前端交流群：
站长推荐：
站长QQ：1209278955
广告位招租
我的专栏
🧙‍ 本站无任何遮挡、悬浮、飘窗等影响阅读体验的广告。
🙏 为了更好地浏览文章，请关闭净网大师、AdBlock等广告屏蔽插件或将本站加入白名单。
热门文章
分享几个接收短信验证码平台，2021年12月更新
10万+
分享几个接收短信验证码平台，2021年3月更新
10万+
Jetbrains激活补丁JetbrainsIdesCrack-4.2更新 2020年可用激活方法76592℃
html中引入调用另一个公用html模板文件的方法49918℃
微信小程序调用摄像头扫描识别二维码和条形码30447℃
input[type=file]去掉“未选择任何文件”及样式改进28753℃
Jetbrains IDEA 2019系列，2020年最新激活方法，有效期至2089年25882℃
Chrome视频下载插件Flash Video Downloader v31.2.11下载22960℃
js获取input上传文件的文件名和扩展名的方法22959℃
Ueditor后端配置项没有正常加载,上传插件不能正常使用!的解决过程。21558℃
热门标签
phpstrom (10)
php (18)
插件 (15)
css (60)
html (18)
jquery (17)
webstrom (10)
浏览器 (13)
服务器 (17)
js (35)
chrome (13)
小程序 (26)
微信 (17)
javascript (14)
微信小程序 (18)
git (21)
react (11)
phpstorm (14)
webstorm (13)
vue (43)
antd (24)
Vue (14)
uni-app (16)
React (19)
Umi (11)
若本文对您有所帮助，欢迎适当打赏，感谢！
本站内容多整理于互联网，如有侵权，请联系我们删除！QQ:1209278955. 前端资源 | 图片二维码生成器 | 下载站 | 打赏本站 | 德顺博客 | 网站统计 | Archiver | Sitemap ✔ Copyright © W3H5.com. Powered By Z-Blog , Theme by Deshun! 鲁ICP备15019922号-7