当前位置：首页 > news >正文

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

news 2026/6/3 3:56:04

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加载环境变量的优先级为：

命令行参数--mode指定的模式配置文件
系统环境变量
通用配置文件 (.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 构建流程

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

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
解决方案：

检查变量名是否以VITE_为前缀
确认配置文件是否在项目根目录
重启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}`), '') } } }