guoyu/Archive/Study-Vue-redis_docs/环境变量配置说明.md

环境变量配置说明

问题

登录时出现404错误，原因是缺少环境变量 VUE_APP_BASE_API。

解决方案

方案1：手动创建环境变量文件（推荐）

在 study-ui 目录下创建以下文件：

1. 创建 .env.development 文件（开发环境）

# 开发环境配置
ENV = 'development'

# 国语教育平台/开发环境
VUE_APP_BASE_API = '/dev-api'

# 开发环境标题
VUE_APP_TITLE = 国语教育平台

2. 创建 .env.production 文件（生产环境）

# 生产环境配置
ENV = 'production'

# 国语教育平台/生产环境
VUE_APP_BASE_API = '/api'

# 生产环境标题
VUE_APP_TITLE = 国语教育平台

方案2：使用默认值（已修复）

代码中已经设置了默认值 /api，如果环境变量未定义，会自动使用默认值。

使用步骤

1. 创建环境变量文件（如果使用方案1）

   • 在 study-ui 目录下创建 .env.development 文件
   • 复制上面的内容到文件中

2. 重启前端服务

   # 停止当前服务（Ctrl+C）
   cd Study-Vue-redis/study-ui
   npm run dev
   

3. 确认后端服务已启动

• 后端服务应该运行在 http://localhost:30091
  • 如果端口不同，需要修改 vue.config.js 中的 baseUrl

4. 测试登录
   • 打开 http://localhost:80 或 http://localhost:5173
   • 输入用户名：admin
   • 输入密码：abc123
   • 输入验证码
   • 点击登录

验证

登录请求的完整流程：

1. 前端发送：POST /api/login
2. 代理转发：POST http://localhost:30091/login
3. 后端处理并返回token

如果仍然出现404，请检查：

• 后端服务是否启动（访问 http://localhost:30091/swagger-ui/index.html 测试）
• 后端端口是否为8080（如果不是，修改 vue.config.js 中的 baseUrl）
• 浏览器控制台Network标签，查看实际请求的URL