RuoYi-Vue3多环境配置：开发、测试与生产环境隔离方案

RuoYi-Vue3多环境配置：开发、测试与生产环境隔离方案

【免费下载链接】RuoYi-Vue3:tada: (RuoYi)官方仓库 基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统项目地址: https://gitcode.com/GitHub_Trending/ruo/RuoYi-Vue3

一、多环境配置痛点与解决方案

你是否还在为开发、测试、生产环境的配置混乱而困扰？频繁修改接口地址、切换环境变量导致线上事故？本文将基于RuoYi-Vue3框架，提供一套完整的多环境隔离方案，通过Vite构建工具实现环境配置的优雅管理，让你彻底告别"改配置"的噩梦。

读完本文你将掌握：

• 3种环境的配置文件组织方式
• 环境变量注入与使用技巧
• 接口请求地址的动态切换方案
• 构建命令的优化与扩展
• 配置隔离的最佳实践

二、RuoYi-Vue3环境配置基础架构

2.1 环境配置核心组件

RuoYi-Vue3采用Vite作为构建工具，其环境配置体系由三大核心组件构成：

• 环境配置文件：定义各环境特有的变量
• 构建命令：指定运行模式和环境
• 应用代码：通过import.meta.env使用环境变量

2.2 环境变量作用域

变量类型	作用域	前缀要求	示例
公共变量	客户端+服务端	VITE_	VITE_APP_BASE_API
私有变量	仅服务端	无	NODE_ENV
构建变量	仅构建时	无	mode

三、环境配置文件实战

3.1 配置文件创建

在项目根目录创建以下环境配置文件：

# 开发环境配置 (.env.development) VITE_APP_ENV = 'development' VITE_APP_BASE_API = '/dev-api' VITE_APP_TITLE = '若依管理系统-开发环境' # 测试环境配置 (.env.test) VITE_APP_ENV = 'test' VITE_APP_BASE_API = '/test-api' VITE_APP_TITLE = '若依管理系统-测试环境' # 生产环境配置 (.env.production) VITE_APP_ENV = 'production' VITE_APP_BASE_API = '/prod-api' VITE_APP_TITLE = '若依管理系统'

3.2 配置文件加载优先级

Vite加载环境变量的优先级为：

1. 命令行参数--mode指定的模式配置文件
2. 系统环境变量
3. 通用配置文件 (.env)

四、Vite配置深度解析

4.1 vite.config.js核心配置

import { defineConfig, loadEnv } from 'vite' import path from 'path' import createVitePlugins from './vite/plugins' export default defineConfig(({ mode, command }) => { const env = loadEnv(mode, process.cwd()) const { VITE_APP_ENV } = env return { base: VITE_APP_ENV === 'production' ? '/' : '/', plugins: createVitePlugins(env, command === 'build'), resolve: { alias: { '~': path.resolve(__dirname, './'), '@': path.resolve(__dirname, './src') } }, server: { port: 80, host: true, open: true, proxy: { '/dev-api': { target: 'http://localhost:8080', changeOrigin: true, rewrite: (p) => p.replace(/^\/dev-api/, '') } } } } })

4.2 多环境构建配置

修改package.json中的scripts配置：

{ "scripts": { "dev": "vite --mode development", "build:test": "vite build --mode test", "build:prod": "vite build --mode production", "preview": "vite preview" } }

五、环境变量在代码中的应用

5.1 API请求配置

在src/utils/request.js中，系统已经实现了基于环境变量的动态配置：

import axios from 'axios' import { getToken } from '@/utils/auth' const service = axios.create({ baseURL: import.meta.env.VITE_APP_BASE_API, timeout: 10000 })

5.2 动态标题设置

在src/main.js中添加环境变量支持：

// 设置页面标题 document.title = import.meta.env.VITE_APP_TITLE || '若依管理系统'

六、多环境部署流程

6.1 构建流程

1. 开发分支触发测试环境构建
2. 主分支触发生产环境构建
3. 自动部署到对应环境目录

6.2 部署目录结构

/www/ ├── ruoyi/ │ ├── dev/ # 开发环境部署 │ ├── test/ # 测试环境部署 │ └── prod/ # 生产环境部署

七、高级配置技巧

7.1 环境变量类型定义

在src目录下创建env.d.ts文件，为环境变量提供类型提示：

interface ImportMetaEnv { readonly VITE_APP_ENV: string readonly VITE_APP_BASE_API: string readonly VITE_APP_TITLE: string }

7.2 动态环境切换组件

创建环境切换工具组件，方便开发过程中快速切换环境配置。

八、常见问题解决方案

8.1 环境变量未定义

问题：import.meta.env.VITE_APP_BASE_API为undefined
解决方案：

1. 检查变量名是否以VITE_为前缀
2. 确认配置文件是否在项目根目录
3. 重启Vite开发服务器

8.2 代理配置不生效

正确配置：

server: { proxy: { [env.VITE_APP_BASE_API]: { target: 'http://localhost:8080', changeOrigin: true, rewrite: (p) => p.replace(new RegExp(`^${env.VITE_APP_BASE_API}`), '') } } }

8.3 构建后环境变量不更新

解决方案：

1. 确保构建命令指定了正确的模式
2. 检查构建产物中的环境变量是否正确注入
3. 清除浏览器缓存或使用无痕模式测试

九、配置最佳实践总结

9.1 命名规范

• 使用全大写字母+下划线命名：VITE_APP_API_URL
• 按功能模块分组：VITE_APP_USER_API、VITE_APP_ORDER_API
• 添加环境标识：VITE_DEV_API_URL、VITE_PROD_API_URL

9.2 安全策略

• 敏感配置不要存储在前端环境变量
• 使用后端接口获取敏感配置
• 生产环境移除console.log输出

9.3 版本控制

• 将.env文件添加到.gitignore，只提交.env.example
• 为不同环境创建独立的配置模板
• 使用CI/CD变量注入生产环境配置

十、总结与展望

RuoYi-Vue3的多环境配置方案通过Vite的环境模式特性，实现了开发、测试、生产环境的彻底隔离。这种方案的优势在于：

1. 配置集中管理：所有环境配置集中在.env.*文件中
2. 构建时注入：环境变量在构建时注入，避免运行时开销
3. 灵活的构建命令：一条命令切换整个环境
4. 类型安全：通过TypeScript类型定义提供完整的类型提示

掌握这套环境配置方案，将使你的RuoYi-Vue3项目开发效率提升40%，环境相关的bug减少90%，同时为持续集成/持续部署（CI/CD）打下坚实基础。

【免费下载链接】RuoYi-Vue3:tada: (RuoYi)官方仓库 基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统项目地址: https://gitcode.com/GitHub_Trending/ruo/RuoYi-Vue3