UMI多环境配置

简介: 一般来说项目不止有dev和prod两个环境,umi可以通过环境变量 UMI_ENV 区分不同环境来指定配置。

一般来说项目不止有dev和prod两个环境,umi可以通过环境变量 UMI_ENV 区分不同环境来指定配置。

需求:三套环境->本地环境localtest、测试发布环境testbuild、正式环境probuild

1.在根目录新建.umirc.localtest.ts、.umirc.testbuild.ts、.umirc.probuild.ts三个配置文件。

每个文件中按照以下方式定义变量,一般可包括测试账户的账号密码、请求前缀等。

export default {
  define: {
    loginName:'zhangsan',        //登录名
    loginPassword:'****',        //登录密码
    prefix:'',                   //请求前缀
  },
};
  1. 安装cross-env,这个包是可以在跨平台设置环境变量。
package.json文件:
"scripts": {
    "start:localtest": "cross-env UMI_ENV=localtest umi dev",  //设置UMI_ENV为localtest
    "start:testbuild": "cross-env UMI_ENV=testbuild umi dev",
    "start:probuild": "cross-env UMI_ENV=probuild umi dev",
    "build:testbuild": "cross-env UMI_ENV=testbuild umi build",
    "build:probuild": "cross-env UMI_ENV=probuild umi build",
  },

运行npm run start:localtest 即可运行localtest环境 同理其他环境

3.在页面中直接使用变量

console.log(loginName,loginPassword,prefix)

例:

if(!loginName||!loginPassword){
  message.error('登录名或密码为空')
  return
}
let param={
  loginName,
  loginPassword
}
dispatch({
  type: 'loginModal/login',
  payload: {
    param
  },
})

注:如果项目的配置比较复杂,可以将配置写在 config/config.ts 中。

相关文章
|
10月前
|
JavaScript 中间件 API
nuxt3:我们开始吧-开发-配置-部署(一)
nuxt3:我们开始吧-开发-配置-部署(一)
703 0
|
10月前
|
中间件 API
nuxt3:我们开始吧-开发-配置-部署(二)
nuxt3:我们开始吧-开发-配置-部署(二)
369 0
|
10月前
|
存储 应用服务中间件 nginx
nuxt3:我们开始吧-开发-配置-部署(三)
nuxt3:我们开始吧-开发-配置-部署(三)
655 0
|
18天前
|
缓存 监控 JavaScript
环境搭建:Vue项目的开发环境和生产环境配置
【4月更文挑战第23天】本文指导Vue开发者配置开发和生产环境,强调了两者目的和特点。开发环境用于编写、测试和调试,侧重快速反馈和调试工具;生产环境注重稳定性、效率和安全性,需进行代码优化、错误处理和日志监控。配置步骤包括安装Node.js和npm,使用Vue CLI,配置Webpack、热重载和源码映射。生产环境要实现代码分割、压缩、最小化,启用CSP、HTTPS,优化静态资源和缓存策略。环境配置应随项目发展和技术进步持续优化。
|
24天前
|
JSON JavaScript 数据格式
使用pnpm搭建monorepo开发环境
使用pnpm搭建monorepo开发环境
31 0
|
5月前
|
资源调度 JavaScript 前端开发
如何安装 Vue 3 并配置开发环境
如何安装 Vue 3 并配置开发环境
169 0
如何安装 Vue 3 并配置开发环境
|
8月前
|
资源调度 JavaScript 前端开发
nuxt2-storybook-vite:环境搭建、基础使用 / nuxt项目组件库
nuxt2-storybook-vite:环境搭建、基础使用 / nuxt项目组件库
195 0
|
8月前
|
JavaScript
为老的vueCli项目添加vite支持
为老的vueCli项目添加vite支持
77 0
为老的vueCli项目添加vite支持
|
10月前
|
缓存 前端开发 JavaScript
前端工具Vite的出现解决了什么?
在 ESM 出现之前,Javascript 是没有一个标准的模块方案。 比如说 `CJS` 是用于 Node 服务端的模块化方案,`AMD` 是用于浏览器的模块化方案。为了解决这个模块共用性问题,出现了 `UMD` 用于兼容这两种模块规范。 鉴于上面共用性问题,实际开发中配置的打包方式,采用的还是 UMD 模式。因为这样可以避免打包而产生的规范问题,并且在 ESM 不能使用的情况下也会选择 UMD。
90 0
前端工具Vite的出现解决了什么?
|
11月前
|
JSON 前端开发 数据格式
从零搭建 Vite + React 开发环境 #112
从零搭建 Vite + React 开发环境 #112
204 0