umi打包后页面空白处理

已于 2022-06-09 10:19:09 修改
阅读量2.7k 收藏
点赞数
文章标签： javascript 前端 reactjs
于 2022-06-07 09:14:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43107123/article/details/125158752
版权

umi 搭建项目，打包后页面按空白处理

第一种需要有个前缀路由
配置如下

  1. config.js文件
 publicPath: '/h5/',
  base: '/h5/',

umi中路由前缀配置

base
Type: string Default: / 设置路由前缀，通常用于部署到非根目录。

比如，你有路由 / 和 /users，然后设置了 base 为 /foo/，那么就可以通过 /foo/ 和 /foo/users
访问到之前的路由。

打包后index.html文件
![在这里插入图片描述](https://img-blog.csdnimg.cn/d20a37ea73fb4dd88d3d2cdeb1d7bd7e.png

登录逻辑

  window.location.href = window.location.origin + '/h5/login/'

第二种不需要前缀

直接在configjs配置
publicPath: ‘./’,

小贝壳.com
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
umi-plugin-alioss:umi-plugin-alioss 打包上传OSS
05-25
umi-plugin-alioss umi,umi-plugin,alioss 基于 umi2.x 插件体系编写 说明 基于umi-plugin系统封装的一个插件，用于构建成功之后上传静态资源到阿里云 使用 yarn add umi-plugin-alioss -D yarn add ali-oss -D 在....
webpack搭建多页面的打包
08-10
- 输出：配置输出选项来指定打包后的文件路径和命名规则。 - 加载器：用于转换不同类型的模块，如.js、.css、.png等，使它们可以被Webpack处理。 - 插件：执行更复杂的任务，如代码分割、压缩、优化等。 2. **...
关于React+umi项目打包上线后，服务器访问不到页面空白问题
weixin_52277438的博客
02-28 962
关于React+umi项目打包上线后，服务器访问不到页面空白问题。1.检查config文件里。
umi打包页面打开空白问题
weixin_58031521的博客
06-25 1487
空白问题解决方案：config.ts打包配置。扩展：根据环境打包配置。
Electron 打包 umi 项目，打开空白
从零开始的Rem486
12-08 942
问题： dev 环境使用 url 正常显示，打包后页面空白 // dev mainWindow.loadURL('http://localhost:8000/') // prod mainWindow.loadFile(path.resolve(__dirname, '../renderer', 'index.html')); 原因： history 模式只能部署到 web 服务器使用，默认是 history 解决： 路由使用 hash 模式 // .umirc.ts export default {
umi项目部署在非根目录下，打开空白页的问题
sakura的博客
09-16 3827
umi项目部署在非根目录下，打开空白页的问题 ​ 在用umi作为前端框架部署项目的时候，执行指令 yarn run build生成dist文件，然后将该文件放在站点上，访问该站点就能访问这个网页了。一切照做但是却发现了一些问题，踩坑好久终于解决。 ​ 出现这种都是空白页的，其实是样式文件和JS脚本没有请求到所导致的。原因是umi默认你build后的文件都是放在更目录里面，但是实际情况是可能有些网页你需要放在已经建好的站点里面作为子目录来进行请求，这样路径不对自然就请求 不到了。 可以看下打包后的文件。根据
react项目打包后，浏览器直接打开dist/index.html页面出现空白
zsy_1991的博客
03-10 8330
问题解决 下面 umi 的两个配置解决了问题。 { publicPath: './', history: { type: 'hash', } } 问题描述 使用umi + react + ant design 搭建React web项目，使用的config.ts 配置如下： import { defineConfig } from 'umi'; import defaultSettings from './defaultSettings'; import proxy fr
umi_UMI_umi跨域401_umi跨域_Umi跨域打包_umi脚手架_
10-02
"Umi跨域打包"指的是在umi项目构建过程中，处理好跨域设置并进行代码打包。umi使用的是webpack进行打包，我们可以在配置文件`config/config.js`或`config/umi.js`中添加相应的webpack配置，例如设置`proxy`或修改`...
vue打包静态资源后显示空白及static文件路径报错的解决
11-19
打包之后打开dist的页面显示空白： 这个问题以前就处理过，是打包过程中出现错误频率较高的一种，可能有3处地方会出现这种情况 1、记得改一下config下面的index.js中bulid模块导出的路径。因为打包后的index.html...
记一次react前端项目打包优化的方法
10-15
首先，我们遇到的问题是在uat环境中，由于bundle.js文件过大（3.6MB），导致页面加载时白屏时间超过30秒，严重影响用户体验。为了解决这个问题，我们需要采取一系列的优化策略。 第一步是优化依赖库，特别是体积...
react+umi npm run build打包后的静态文件无法本地打开显示白屏
Cvory
10-19 5655
web 项目是使用的react框架，然后由umi的脚手架创建的 yarn create @umijs/umi-app 需求： 打包后的文件需要本地可在浏览器打开 原理 原本打包后的文件 是在服务器中访问，静态文件中的 方案 在config中配置路径相关的属性 实测好用 ...
umi 基础配置及常见问题
qq_37855074的博客
05-20 7714
1.配置产品名称和产品Logo 操作： 在根目录下新建public文件夹，在public文件夹下新建img文件夹,把logo图片放到img文件夹下； 注意：public目录下所有文件会被 copy 到输出路径。 在 .umirc.ts文件 加入如下配置，注意这里的路径是 ‘./img/logo.jpeg’ ,而不是 ‘./public/img/logo.jpeg’ 。 export default defineConfig({ layout: { name: '西瓜平台', // 产品
React-antd 打包后页面空白解决方案
SnowBeatRain的博客
07-18 6554
  在根目录下打开可以在别的资源目录下打开空白： import { BrowserRouter } from 'react-router' 因为BrowserHistory 需要服务器的支持。改成hashHistory完美解决 和vue-cli的history类似，...
React项目npm run build打包上线后，页面出现空白的原因
逍遥-小子的博客
09-02 1万+
1.在你还没打包之前找到package.json这个文件，添加一行"homepage":"./"就可以了。
umi打包后丢到服务器下，不显示。
眼睛微微笑的博客
06-05 1563
// umi3:配置如下：(umi2的配置在下面) umi2的配置:
vue项目打包后打开空白解决办法
热门推荐
王永存
09-22 4万+
vue+webpack+HBulider打包后手机上一片空白解决办法 网上很多说自己的VUE项目通过Webpack打包生成的list文件，放到HBulider打包后，通过手机打开一片空白。这个主要原因是路径的问题。 1、记得改一下config下面的index.js中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的，而你的路径不对，打开肯定是空白的。先看
uniApp vue2 vue3配置代理
最新发布
小白变怪兽
06-28 357
【代码】uniApp vue2 vue3配置代理。
umi项目打包后白屏
10-25
umi 是一个基于 React 的前端框架，打包后出现白屏可能有多种原因，以下是一些可能的解决方案： 1. 检查路由配置是否正确，确保路由能够正确匹配到对应的组件。 2. 检查是否存在语法错误或者逻辑错误，可以通过在代码中添加 console.log() 来进行调试。 3. 检查是否存在依赖冲突或者版本不兼容的问题，可以尝试升级或者降级相关依赖。 4. 检查是否存在资源加载失败的问题，可以通过浏览器的开发者工具查看网络请求是否正常。 5. 检查是否存在缓存问题，可以尝试清除浏览器缓存或者使用无缓存模式重新加载页面。 如果以上方法都无法解决问题，可以尝试在 umi 的 GitHub 仓库中提出 issue 寻求帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值