76 lines
1.9 KiB
Markdown
76 lines
1.9 KiB
Markdown
|
# 环境变量配置说明
|
|||
|
|
|
|||
|
|
## 问题
|
|||
|
|
登录时出现404错误，原因是缺少环境变量 `VUE_APP_BASE_API`。
|
|||
|
|
|
|||
|
|
## 解决方案
|
|||
|
|
|
|||
|
|
### 方案1：手动创建环境变量文件（推荐）
|
|||
|
|
|
|||
|
|
在 `study-ui` 目录下创建以下文件：
|
|||
|
|
|
|||
|
|
#### 1. 创建 `.env.development` 文件（开发环境）
|
|||
|
|
```env
|
|||
|
|
# 开发环境配置
|
|||
|
|
ENV = 'development'
|
|||
|
|
|
|||
|
|
# 国语教育平台/开发环境
|
|||
|
|
VUE_APP_BASE_API = '/dev-api'
|
|||
|
|
|
|||
|
|
# 开发环境标题
|
|||
|
|
VUE_APP_TITLE = 国语教育平台
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 2. 创建 `.env.production` 文件（生产环境）
|
|||
|
|
```env
|
|||
|
|
# 生产环境配置
|
|||
|
|
ENV = 'production'
|
|||
|
|
|
|||
|
|
# 国语教育平台/生产环境
|
|||
|
|
VUE_APP_BASE_API = '/api'
|
|||
|
|
|
|||
|
|
# 生产环境标题
|
|||
|
|
VUE_APP_TITLE = 国语教育平台
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 方案2：使用默认值（已修复）
|
|||
|
|
|
|||
|
|
代码中已经设置了默认值 `/api`，如果环境变量未定义，会自动使用默认值。
|
|||
|
|
|
|||
|
|
## 使用步骤
|
|||
|
|
|
|||
|
|
1. **创建环境变量文件**（如果使用方案1）
|
|||
|
|
- 在 `study-ui` 目录下创建 `.env.development` 文件
|
|||
|
|
- 复制上面的内容到文件中
|
|||
|
|
|
|||
|
|
2. **重启前端服务**
|
|||
|
|
```bash
|
|||
|
|
# 停止当前服务（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
|
|||
|
|
|