【AntDesign】多环境配置和启动

环境分类,可以分为 本地环境、测试环境、生产环境等,通过对不同环境配置内容,来实现对不同环境做不同的事情。

AntDesign 项目,通过 config.xxx.ts 添加不同的后缀来区分配置文件,启动时候通过后缀启动即可。

  • config.ts : 公共配置
  • config.xxx.ts:不同环境的差异配置

1 查看当前环境

通过代码process.env.NODE_ENV 查看开发环境

用了 umi 框架,build 时会自动传入 NODE_ENV == production 参数,start NODE_ENV 参数为 development

  • 开发环境:development
  • 生产环境:production

image-20230924213849762

2 配置文件

不同项目都有不同的配置文件,umi的配置文件是config,可以在配置文件后添加对应的环境后缀来区分不同的环境。

参考文档:https://umijs.org/zh-CN/docs/deployment

  • 公共环境:config.ts
  • 开发环境:config.dev.ts
  • 生产环境:config.prod.ts

3 修改请求后端地址

通过自定义的request中的prefix设置请求后端地址

image-20230924214125462

4 打包

打包方式分为命令行或界面按钮两种,最终都会生成dist目录。

Build 出来的环境process.env.NODE_ENV值是production

命令行方式,记得要在项目根目录执行。

  • 方式一:

    npm run build
  • 方式二:

    umi build
  • 方式三:

    按钮触发,跟方式二一样,方式二是命令行

    image-20230924212749547

5 启动

  • 安装 serve

    server 是前端启动的工具,方便本地启动

    npm i -g serve
  • 命令行启动

    // 进入打包目录cd ./dist
    // 本地启动
    serve

    image-20230924194633086

点击链接访问即可

总结

前端的多环境配置,相对于后端有些麻烦,还有很多可以优化的空间。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/155600.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Centos7安装Gitlab--gitlab--ee版

1 安装必要依赖 2 配置GitLab软件源镜像 3 下载安装GitLab 4 查看管理员root用户默认密码 5 登录GitLab 6 修改密码 7 gitlab相关命令 1 安装必要依赖 sudo yum install -y curl policycoreutils-python openssh-server perl sudo systemctl enable sshd sudo systemctl sta…

antd Form shouldUpdate 关联展示 form 数组赋值

form 数组中嵌套数值更新 注意:数组是引用类型 项目需求,表单中包含多个产品信息,使用form.list 数组嵌套,提货方式如果是邮寄展示地址,如果是自提,需要在该条目中增加两项 代码如下:// An hi…

K8S云计算系列-(4)

K8s Dashboard UI 部署实操 Kubernetes实现的最重要的工作是对Docker容器集群统一的管理和调度,通常使用命令行来操作Kubernetes集群及各个节点,命令行操作非常不方便,如果使用UI界面来可视化操作,会更加方便的管理和维护。如下为…

优盘无法格式化?分享简单解决方法!

“我的优盘插入了一个带病毒的电脑中,现在优盘也中毒了,想把它格式化。但是操作的时候却显示优盘无法格式化,这种情况应该怎么办呢?” 优盘,又称USB闪存驱动器。由于其体积小且方便携带,受到广大电脑用户的…

elasticsearch 8.5.3问题记录

一:解决 elasticsearch 高版本 warning: ignoring JAVA_HOMEC:\Program Files\Java\jdk-11; using bundled JDK if defined JAVA_HOME (set JAVA_HOME%JAVA_HOME%; )示例版本Elasticsearch 8.5.3 可以与 JDK 11 兼容,但不支持 JDK 17。确保选…

亏损8.5万亿,美芯将敞开供应存储芯片,试图压制中国存储芯片

近期美国表示将给与韩国存储芯片无限期豁免,允许它们将先进芯片设备运到它们在中国的存储芯片,这意味着这两家韩国存储芯片企业可以敞开对中国供应存储芯片了,为何美国会突然放开呢? 一方面是韩国存储芯片已陷入窘境,据…

【算法-贪心】无重叠区间-力扣 435 题

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kuan 的首页,持续学…

Blender:对模型着色

Blender:使用立方体制作动漫头像-CSDN博客 上一步已经做了一个头像模型,我做的太丑了,就以这个外星人头像为例 首先切换到着色器编辑器 依次搜索:纹理坐标、映射、分离xyz和颜色渐变 这里的功能也是非常丰富和强大&#xff0c…

迁移学习--预训练微调

目录 1、迁移学习作用 2、迁移学习的途径 3、相关的领域 4、在计算机视觉中的应用 5、迁移学习的办法 预训练模型 微调 6、总结 1、迁移学习作用 定义:能在一个任务学习一个模型,然后用来解决相关的别的任务,这样我们在一个地方花…

深度学习基础知识 register_buffer 与 register_parameter用法分析

深度学习基础知识 register_buffer 与 register_parameter用法分析 1、问题引入2、register_parameter()2.1 作用2.2 用法 3、register_buffer()3.1 作用3.2 用法 1、问题引入 思考问题:定义的weight与bias是否会被保存到网络的参数中,可否在优化器的作用…

想用macbook录制视频?这几个技巧让你事半功倍!

在今天的数字时代,录制视频已经变得非常常见,无论是为了制作内容、演示、教育还是娱乐。如果您是一名macBook用户,您拥有一些强大的工具来满足您的视频录制需求。本文将向您介绍两种macbook录制视频的方法,帮助您更好地录制高质量…

SQL利用Case When Then多条件判断

CASE WHEN 条件1 THEN 结果1 WHEN 条件2 THEN 结果2 WHEN 条件3 THEN 结果3 WHEN 条件4 THEN 结果4 ......... WHEN 条件N THEN 结果N ELSE 结果X END Case具有两种格式。简单Case函数和Case搜索函数。 --简单Case函数 CASE sex WHEN 1 THEN…

东芝Z750的画质真实吗?适合看纪录片吗?

东芝Z750显示的画面更加真实、细腻、有层次感,就感觉电视中的画面像真实世界一般呈现在眼前,东芝电视拥有70余年的原色调校技术,每款产品都有专属的日本调校工程师匠心打造,可以真实还原画面色彩,若是观看类似《航拍中国》这样的旅游记录片时,东芝电视将会营造出万里山河的壮阔…

从0开始学go第五天

gin框架返回JSON package mainimport ("net/http""github.com/gin-gonic/gin" )func main() {r : gin.Default()r.GET("/json", func(c *gin.Context) {//用map序列化//方法一:用map,后面用接口类型// data : map[string…

利用人工智能做射击游戏辅助(二)AlphaPose环境配置

一、anaconda安装 官网地址:Free Download | AnacondaAnacondas open-source Distribution is the easiest way to perform Python/R data science and machine learning on a single machine.https://www.anaconda.com/download 下载之后下一步就可以&#xff0c…

谷歌云 | 零售行业的生成式 AI:如何跟上步伐并取得领先

【Cloud Ace 是 Google Cloud 全球战略合作伙伴,在亚太地区、欧洲、南北美洲和非洲拥有二十多个办公室。Cloud Ace 在谷歌专业领域认证及专业知识目前排名全球第一位,并连续多次获得 Google Cloud 各类奖项。作为谷歌云托管服务商,我们提供谷…

[Python]图片转字符画——这就是我的表情!!!!!!

背景 偶尔看到一些视频,他们把图片转字符画,平常也没有去关注,今天来捣鼓一下。 研究了一下还超级简单的,都是调用别人写好的框架。 网上也有很多教学。 代码实现 from PIL import Image # 表示字符颜色,由深到浅&am…

Redis 的过期键 | Navicat 技术干货

Redis 是一种高性能的内存数据存储,以其速度和多功能性而闻名。其中一个有用的特性是为键设置过期时间的功能。在 Redis 中,为键设置过期时间对于管理数据和确保过时或临时数据自动从数据库中删除是至关重要的。在本文中,我们将探讨在 redis-…

【AI】深度学习——前馈神经网络——全连接前馈神经网络

文章目录 1.1 全连接前馈神经网络1.1.1 符号说明超参数参数活性值 1.1.2 信息传播公式通用近似定理 1.1.3 神经网络与机器学习结合二分类问题多分类问题 1.1.4 参数学习矩阵求导链式法则更为高效的参数学习反向传播算法目标计算 ∂ z ( l ) ∂ w i j ( l ) \frac{\partial z^{…