【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

2 配置文件

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

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

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

3 修改请求后端地址

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

4 打包

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

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

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

  • 方式一:

    复制代码
    npm run build
  • 方式二:

    复制代码
    umi build
  • 方式三:

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

5 启动

  • 安装 serve

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

    复制代码
    npm i -g serve
  • 命令行启动

    复制代码
    // 进入打包目录
      cd ./dist
    // 本地启动
    serve

点击链接访问即可

总结

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

相关推荐
kali-Myon4 小时前
2025春秋杯网络安全联赛冬季赛-day1
java·sql·安全·web安全·ai·php·web
我是咸鱼不闲呀4 小时前
力扣Hot100系列20(Java)——[动态规划]总结(下)( 单词拆分,最大递增子序列,乘积最大子数组 ,分割等和子集,最长有效括号)
java·leetcode·动态规划
清水白石0084 小时前
深入解析 LRU 缓存:从 `@lru_cache` 到手动实现的完整指南
java·python·spring·缓存
符哥20084 小时前
C++ 进阶知识点整理
java·开发语言·jvm
Sayuanni%34 小时前
初阶_多线程1(线程含义与关键属性)
java
程序媛徐师姐5 小时前
Java基于微信小程序的模拟考试系统,附源码+文档说明
java·微信小程序·java模拟考试系统小程序·模拟考试微信小程序·模拟考试系统小程序·模拟考试小程序·java模拟考试小程序
疯狂敲代码的老刘5 小时前
JDK 1.6到25 全版本网盘合集 (Windows + Mac + Linux)
java·linux·windows·macos·jdk
夕除5 小时前
js--15
java·jvm·spring
曾经的三心草5 小时前
redis-9-集群
java·redis·mybatis
sun03225 小时前
【架构基础】Spring中的PropertySourcesPlaceholderConfigurer介绍 (并非新知识,比较古老的一种使用方式)
java·spring·架构