umi环境相关配置踩坑

已于 2024-07-28 11:12:24 修改
阅读量180 收藏
点赞数 1
文章标签： javascript 前端 react.js
于 2024-07-17 17:34:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43024757/article/details/140499387
版权

createContext读取undefined

本地运行公司项目时，控制台报错，mini-create-react-context说读取不到createContext
在这里插入图片描述
公司项目用的技术栈是umi3.5.0 + react.17，项目配置了CDN加速，即依赖从CDN中获取，umi的配置添加了externals
在这里插入图片描述
项目跑起来后，可以看到页面是注入了CDN的react
在这里插入图片描述
所以最终的解决办法也是把上面的externals配置注释掉重跑，即本地访问时让他使用本地的react依赖而不是走CDN

另外还可以尝试一下把CDN的引入位置放到配置中去
在这里插入图片描述
可能哥们儿先执行了const react = window.React才去CDN获取真正的react包

EtherCoding
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
umi 如何配置webpack_umi 框架 如何配置 自定义 插件 和 loader
weixin_39835117的博客
12-21 1845
一 准备工作umi 为 react 的一个封装比较nice的脚手架。优点当然就是 安装方便，开箱即用，集成了诸多好用功能，详见 官网。 当然 缺点就是 无法暴露原始的webpack.config.json 文件，只能按照官方文档上特定的方法进行修改，而文档却并不完善。项目顺利进行大家笑嘻嘻，一旦遇到偏难怪需求，要改变webpack配置了，大家哭唧唧。 从此踏上踩坑之路，骚年。 (ps：自己还是喜欢...
react项目配置webpack踩坑之路
qq_40619263的博客
01-13 2610
踩坑一： 博主这个小菜鸟，在学习react配置webpack时，随便找了网上一个帖子，先附上博主看的链接吧。创建react项目并配置webpack 但是，这个
Umi踩坑：Umi路由配置（原理、解决办法）
实事求是，艰苦奋斗，小小的梦想，终将实现。
12-15 2万+
前言 以前都是使用vue的脚手架或者是node.js中的路由配置，当用惯了这些后，在使用Umi发现路由怎么都配置不对，我淦！！！，这个游戏也太难了。配了半天也配不对，去官网研究了以下，发现是一个思维逻辑出现了错误。我们来看看。 提示：以下是本篇文章正文内容，下面案例可供参考 一、问题描述 我们就拿vue来说。 import Vue from 'vue' import Router from 'vue-router' //import Login from '.././views/login.vue' //
手把手教你搭建 Dva + Umi 开发环境
热门推荐
SCU_Cindy
10-01 2万+
最近开了一个新项目，使用 Dva + Umi 作为主技术栈进行开发。不得不说，当你写过原生 React 后，会发现 Dva 写起来真的是爽歪歪，他对 redux + react-router + redux-saga 进行了一层封装，减少了很多代码操作。同时加上 Umi 强大的路由处理功能，使得开发过程中又一次减少了不少踩坑操作。嗯，，我也是按照 Umi官方指南 的说明一步步来搭建的。中间好像也没...
https协议下配置websocket问题（踩坑）
喜羊羊love红太狼
12-28 1万+
https+websocket
umijs设置多环境变量未生效解决办法
qq_40010841的博客
10-16 631
cross-env UMI_ENV=prod（对应config.prod.js的文件名） API_BASE_URL（指定变量名称）=prod umi build。umijs中设置多环境变量，包括dev/test/prod，根据官方设置之后并没有生效，一顿踩坑最终实现了效果，主要问题出现在package.json中。三、修改package.json文件，画红线部分尤其重要，在这个位置踩坑了很久，如果不指定变量打包和运营都无法生效。只举一个prod环境配置，config.prod.js文件内指定环境变量。
umi 分包
moozixiao的博客
04-17 6650
umi 分包 简介 Umi 是蚂蚁金服推出的一个围绕React技术栈的底层前端框架， 配合antd的UI组件库能极大的提高项目开发效率。 官网地址 umi 拆包 简的来说在 umi 框架中，我们会用到其他的组件库（类如：antd，moment，echarts等），当我们打包构建时，可以看到 umi.js 3M多 的包超大，它把其它组件的都集成到了 umi.js 中了，这样就会造成项目运行耗时长的影响。 使用 analyze 指令运行（使用 cross-env 运行，说明在下个标题： cross-e
前端部署踩坑
兰博儿
03-07 341
背景： pSpacePlus是公司研发的一款工业云端实时历史数据库，后端采用微服务架构，前端使用vue，前后端分离； 该产品绝大多数的应用场景为私有化部署； 在打包前端工程时，因为将后端的访问地址打包到dist安装包中，导致每次部署每次重新部署到一个新的机器时都需要根据机器ip重新打包； ...
umi模拟接口没请求到～
书包的博客
05-31 394
接口名明明正确，为什么没有请求到呢？ 今日踩坑：mock文件夹下应该用.ts文件夹 用tsx加载不到。
React + webpack 环境配置的方法步骤
08-29
React + Webpack 环境配置方法步骤 React 是一个流行的前端框架，用于构建用户界面，而 Webpack 是一个流行的模块打包工具，用于管理和编译 JavaScript 模块。为了使用 React 和 Webpack 构建一个完整的前端环境，...
umi-plugin-qiankun:Umi plugin for qiankun
05-07
Umi@2 plugin for .Umi@3 相应的 qiankun 插件请移步Installation$ npm i @umijs/plugin-qiankun@umi2 -Sor$ yarn add @umijs/plugin-qiankun@umi2Examples导航是主应用，App1 和 App2 是子应用，$ yarn$ yarn build...
umi基础框架（React+umi+Ts）
08-05
- **配置文件**：umi的配置文件通常为`.umirc.js`或`config.js`，用于设置项目配置，包括路由、插件、环境变量等。 2. **dva框架**： - **关系**：dva是一个基于React和Redux的小型轻量级状态管理框架，它也内置...
详解多页应用 Webpack4 配置优化与踩坑记录
10-17
主要介绍了详解多页应用 Webpack4 配置优化与踩坑记录，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
umi_tableData.zip
08-24
umi_tableData.zip 这个压缩包文件显然与前端开发中的 Umi 框架有关，因为标签明确指出了 "umi"。Umi 是一个由阿里开源的、强大的 React 应用框架，它提供了丰富的功能，如路由管理、插件机制、代码分割、按需加载等...
VUE3自定义指令防止重复点击多次提交
MadSnail00的博客
07-30 61
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 349
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
【Vue3】自定义组件
最新发布
又言又语
07-30 231
本文介绍 Vue3 中如何自定义组件。页面组件：用于构建独立页面，通常存放在src/pages或src/views目录下。功能组件：将页面中一些独立的功能封装成独立组件，譬如：分页组件、日期时间组件等。功能组件通常存放在目录下。本文主要说明如何自定义功能组件。
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 899
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
umi3 router配置
08-04
在umi3中，路由配置可以通过在项目根目录下的config/routes.tsx文件中定义路由数组来实现。可以使用IRoute接口来定义每个路由的属性。例如，可以使用path属性指定路由的路径，component属性指定路由对应的组件。可以使用exact属性来指定是否精确匹配路由。可以使用routes属性来定义子路由。[1] 另外，可以在.umirc.ts文件中引入路由配置文件，并将其添加到routes数组中。可以使用defineConfig函数来定义umi的配置。可以使用nodeModulesTransform属性来设置是否对node_modules中的文件进行转换。可以使用history属性来设置路由的类型，例如hash或者browser。可以使用fastRefresh属性来启用快速刷新功能。[1] 如果需要使用动态路由，可以在路由配置文件中使用动态参数，例如/details/:id?，其中:id?表示id参数是可选的。[2] 另外，如果想在项目根目录下创建config文件夹，并在其中创建router.config.js文件来配置路由，可以按照给出的代码示例进行配置。可以使用path属性指定路由的路径，component属性指定路由对应的组件，exact属性指定是否精确匹配路由。可以在routes数组中定义子路由。[3]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值