react+umi npm run build打包后的静态文件无法本地打开显示白屏

最新推荐文章于 2023-06-25 11:39:49 发布
最新推荐文章于 2023-06-25 11:39:49 发布
阅读量5.8k 收藏 7
点赞数 4
分类专栏： web前端 react umi 文章标签： react web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40593656/article/details/109157279
版权
web前端 同时被 3 个专栏收录
61 篇文章 1 订阅
订阅专栏
react
43 篇文章 1 订阅
订阅专栏
umi
16 篇文章 1 订阅
订阅专栏

web 项目是使用的react框架，然后由umi的脚手架创建的

yarn create @umijs/umi-app

在这里插入图片描述
需求：

打包后的文件需要本地可在浏览器打开

原理
原本打包后的文件 是在服务器中访问，静态文件中的

方案
在config中配置路径相关的属性

在这里插入图片描述

实测好用

cvory
关注
专栏目录
react+umi项目打包成electron桌面应用
Cvory
10-19 2738
项目介绍 web项目使用的是 React+Umi+Antd 使用的是umi的脚手架创建项目 yarn create @umijs/umi-app 链接：umi官网 流程 1.将web项目打包成静态文件后 2.在打包后的文件 再用electron打包成桌面应用 （所以其实是用什么框架或者脚手架，都没有什么关系，最后electron需要的是可直接在浏览器访问的静态文件=》npm run build 以后生成的index.html） Coding 将项目进行打包，使用命令行 npm run build
【每天学一点-03】使用脚手架搭建 React+TypeScript+umi.js+Antd 项目
weixin_43906233的博客
06-05 1943
使用脚手架快速搭建 React+TypeScript+umi.js+Antd 项目
umi build打包之后部署报错
heerey525
07-25 1万+
需求：umi 打包 步骤：npm run build ( umi build) 情况： 原因：1、没有找到umi.css、umi.js； 2、在非根目录下部署 解决方法： 方法1、https://www.jianshu.com/p/4ac1daa06521 npm run build cd ./dist serve -s 方法2、https://umijs.org/zh...
react打包部署到服务器上样式加载不出来
qq_36990322的博客
03-19 2222
问题 react打包部署到服务器上样式加载不出来。 其实经过仔细核查代码，发现本地能加载出来所有样式，在index.js首页的样式也能加载出来，但是每个路由组件的自定义样式不能加载出来。 问题前提 在项目中进行了动态import，且路由组件本身引入了自定义的css文件 在服务器端或者index.html页面设置了 内容安全策略Content-Security-Policy style-src ...
react打包后本地访问白屏
SeaBirds的博客
06-27 1449
react首次打包白屏 react打包后index.html中引入文件是相对于根目录的(’/’)。 打包后的文件直接打开使用的是file协议，是针对当前文件管理的根目录进行加载的,所以文件路径是错误的。 服务器打开是使用http协议，针对网站根目录，就是域名默认指向的文件夹。 解决方案: package.json文件加入 package.json { ..., homepage: '.', ... } ...
关于React+umi项目打包上线后，服务器访问不到页面空白问题
weixin_52277438的博客
02-28 1077
关于React+umi项目打包上线后，服务器访问不到页面空白问题。1.检查config文件里。
关于react打包之后静态资源加载错误的问题
admin9740的博客
07-24 2830
之前在打包react项目时发现一些问题，打包出来后我的一部分png图标加载不出来，开发者模式发现他们的路径中莫名其妙混入了我在react-router路由中使用<Browserrouter>的路由名称，网上看到有一种方法是使用Hashrouter，但我的一些功能不允许因此这个方式自然不行，但是我却发现另一个问题，同样的png图片为什么偏偏那几个出不来，我进入开发者模式发现另外...
怎么在本地运行umi框架的生产模式
CS@zeny的博客
05-08 2233
Umi框架下的问题
create-react-app创建的项目npm run build之后静态文件找不到
weixin_30797027的博客
04-29 1105
create-react-app创建的项目npm run build之后，运行build中的index.html，什么都没显示，打开浏览器的F12，发现了几个红色的报错，提示几个文件找不到。 查看生成的index.html，发现，里面引用的js和css的路径都是以"/...."开头的。这样写就是绝对路径了，当然找不到。 正常的应该是相对路径，手动把index.html中的引用文件路径...
umi-start:基于react + umi搭建的脚手架
05-27
:package: 项目说明 react + umi 的后台管理系统 :hammer: 构建 # 启动本地服务 npm run start # 打包构建 npm run build :american_football: 具体使用说明 :palm_tree: 编辑器使用 推荐使用vscode
vue打包静态资源后显示空白及static文件路径报错的解决
11-19
今天使用vue打包（npm run build）遇到了几个坑，在这里分享给大家 打包之后打开dist的页面显示空白： 这个问题以前就处理过，是打包过程中出现错误频率较高的一种，可能有3处地方会出现这种情况 1、记得改一下...
npm run build 打包爬坑记（3）打包压缩优化
陌上花开
07-01 7406
之前打包完后给后台，很好能展示出来，但是verdor很大，加载超级慢，用了路由懒加载，才好多了，但还是没有达到想要的效果，那就继续优化吧，以下是我的优化过程，有些可能不沾边或者还没解决的，欢迎留言告知，多谢 路由懒加载 这个在npm run build 打包爬坑记第5条中已说明 main.js优化思路 这是个老话题了，项目中一般都需要引入插件（例如：mint-ui），但不能在main.js...
umi不输出html文件,在umi中如何访问静态资源
weixin_42511517的博客
06-16 2029
在umi框架中，图片等静态资源主要放到三个地方：1.在/pulbic目录下，一般放共享资源。2.在/src/assets/目录下，一般放全局静态资源。3.在/src/pages/里的各个页面目录下，放在这里的好处是更符合组件化开发的思想，便于拷贝复用。如何访问静态图片：1.如果在/public目录下的静态图片，可以直接输入绝对路径，假设/public/yay.jpg,访问方式如下： 注意：以...
uni 无法本机ip访问 node本机ip无法访问
weixin_45345105的博客
01-14 1028
想本机通过模拟器访问访问本机部署的H5方便排错，发现node用不了ip访问。 防火墙和端口都确认打开，本机ip也能ping通，但换成本机ip无法访问，只能localhost进行访问。 发现node服务器需求特殊配置才可以用ip访问。 解决：使用其他服务器 用VsCode的LiveServer后本机ip成功访问。 模拟器访问 ...
umi打包页面打开空白问题
最新发布
weixin_58031521的博客
06-25 1773
空白问题解决方案：config.ts打包配置。扩展：根据环境打包配置。
Electron 打包 umi 项目，打开空白
从零开始的Rem486
12-08 984
问题： 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 {
react 项目||antdesign项目打包||umi  本地服务器运行的两种方式（tomcat）
EnjoyTea的博客
11-07 1905
react 项目||antdesign项目打包||umi 本地服务器运行的两种方式（tomcat） 前置条件打包命令 npm run-script build 使用serve 1.首先需要安装node 2.使用npm命令行来安装serve npm install -g serve 3. 安装完成后，使用 serve -s .\dist 进入文件文件目录就可以了 使用tomcat 1.打包前 先修改一下对应的配置文件 a .以我的项目(react +umi（...
react中引入图片路劲正确但是页面上不显示或者打包后不能正常显示的问题
qq_51398495的博客
01-07 3326
一、react中图片引入方式 　以前我们用img引入图片只需要如下即可，在react中这样写会报错： <img src="../assets/zzsc1.png" /> 下面我总结了两种方式： 1、用require方式引入路劲 错误用法： <img src={require("./zzsc1.png")} /> 上面这样写也是不会生效的，因为如果使用create-react-app和require导入图像，require返回一个ES模块而不是字符...
weblogic下部署工程静态资源文件 *.js不能访问
yaoqian的博客
12-25 1万+
最近把工程部署 到webogic容器下，问题颇多，在Tomcat下运行正常的应用，在weblogic下频频抽风，先是部署不起来报错，具体报错原因参看上篇文章java web项目Tomcat转移到weblogic部署失败解决  ，解决完部署问题，终于可能访问页面了，又出现页面所有的js页面无法解析，试着访问js路径，报404错误，日志中频报 #### > <Connection
【Antd4.x Form问题】[antd: Form.Item] `children` is array of render props cannot have `name`.
热门推荐
Cvory
06-17 2万+
问题如图： 代码如下： 表现：默认值无法赋值上去 解决方案： 原理：Form.Item一定要直接包裹Input 里面如果有其他元素，就重新包裹一层 官方说明：https://ant.design/components/form-cn/#components-form-demo-complex-form-control ...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值