后台系统从零搭建(二)—— 系统架构设计3之环境变量封装

本系列从零搭建一个后台系统,技术选型React18 + ReactRouter7 + Vite4 + Antd5 + zustand + TS。 这个系列文章将会从零开始,一步一步搭建一个后台系统,这个系统将会包括登录、权限、菜单、用户、角色等功能。

系统架构设计包含:路由封装、Axios请求封装、环境变量封装、storage模块封装(sessionStorage、localStorage)、公共函数封装(日期、金额、权限...)、通用交互定义(删除二次确认、列表、面包屑...)、接口全貌概览等。

本文主要介绍系统架构设计之环境变量封装。

常用的两种配置环境的方式,一种是编译时确定环境变量,一种是运行时确定环境变量。运行时,就是访问页面的时候,根据不同的环境变量,显示不同内容。编译时,就是在编译的时候,根据不同的环境变量,生成不同的代码。

1 编译时确定环境变量

环境和模式的概念区别,可以点击这里,看完对配置环境的理解更加深刻。

编译时确定环境变量,主要是通过env文件配置环境变量,然后在代码中使用环境变量。

项目根目录下新建.env.dev文件,配置环境变量,这里的dev可以理解local但local容易被忽略这边使用dev。

bash 复制代码
VITE_BASE_URL=http://localhost:3000

项目根目录下新建.env.test文件,配置环境变量。

bash 复制代码
VITE_BASE_URL=http://test.com

项目根目录下新建.env.prod文件,配置环境变量。

bash 复制代码
VITE_BASE_URL=http://prod.com

然后在package.json配置相应的命令

json 复制代码
{
  "scripts": {
    "dev": "pnpm dev:dev",
    "dev:dev": "vite --mode dev",
    "dev:test": "vite --mode test",
    "dev:prod": "vite --mode prod",
    "build:test": "vite build",
    "build:prod": "vite build",
    "serve": "vite preview"
  }
}

启动的时候,根据不同的命令,加载不同的环境变量。默认本地开发的时候,加载.env.local文件。

request.ts文件,使用环境变量。

tsx 复制代码
// src/utils/request.ts
import axios from 'axios'

const request = axios.create({
  baseURL: import.meta.env.VITE_BASE_URL as string,
  timeout: 10000,
})

这里,如果想访问正式环境的接口,只需要执行npm run dev:prod命令,就可以访问正式环境的接口。

测试环境的打包,只需要执行npm run build:test命令,就可以打包测试环境的代码。 正式环境的打包,只需要执行npm run build:prod命令,就可以打包正式环境的代码。

2 运行时确定环境变量

运行时确定环境变量,主要是根据访问的地址,来确定环境,从而设置不同的环境变量。

一般新建config/index.ts文件,根据不同的环境,设置不同的环境变量。

js 复制代码
const configMap = {
  dev: {
    baseURL: 'http://localhost:3000',
  },
  test: {
    baseURL: 'http://test.api.example.com',
  },
  prod: {
    baseURL: 'http://api.example.com',
  },
}

const env = (() => {
  const href = window.location.href
  if (href.includes('localhost')) {
    return 'dev'
  }
  if (href.includes('test')) {
    return 'test'
  }
  return 'prod'
})()

const config = configMap[env]

export default config

request.ts文件,使用环境变量。

tsx 复制代码
// src/utils/request.ts
import axios from 'axios'
import config from '@/config'

const request = axios.create({
  baseURL: config.baseURL,
  timeout: 10000,
})

这样,就可以根据访问的地址,来确定环境,从而设置不同的环境变量。 当然,这种方式,需要注意的是,如果是本地开发,需要访问正式环境的接口,就需要手动修改config/index.ts,将config的值设置为正式环境的值config=configMap.prod即可。

3 总结

编译时确定环境变量,主要是通过env文件配置环境变量,然后在代码中使用环境变量。 运行时确定环境变量,主要是根据访问的地址,来确定环境,从而设置不同的环境变量。

这两种方式,在各个公司中,都有使用,根据实际情况,选择合适的方式即可。我个人比较喜欢编译时确定环境变量,这样可以根据不同的命令,加载不同的环境变量,方便开发和部署。

相关推荐
小陈phd5 分钟前
langchain从入门到精通(四十一)——基于ReACT架构的Agent智能体设计与实现
react.js·架构·langchain
我命由我123456 分钟前
Vue 开发问题:Missing required prop: “value“
开发语言·前端·javascript·vue.js·前端框架·ecmascript·js
16年上任的CTO6 分钟前
一文讲清楚React中的key值作用与原理
前端·javascript·react.js·react key
快起来别睡了11 分钟前
Vue 中组件的生命周期与 v-if、v-show 的区别详解
前端·vue.js
阳火锅15 分钟前
在生产环境下,你真的有考虑到使用数组方法的健壮性吗?
前端·javascript·面试
孤月葬花魂26 分钟前
JavaScript 中的 Promise API 全面解析
前端·javascript
几道之旅27 分钟前
Electron 应用打包全指南
前端·javascript·electron
shushushu31 分钟前
Web如何自动播放音视频
前端·javascript
帅夫帅夫36 分钟前
前端存储入门:Cookie 与用户登录状态管理
前端·架构
陈随易39 分钟前
程序员的新玩具,MoonBit(月兔)编程语言科普
前端·后端·程序员