guoyu/Archive/Study-Vue-redis_docs/修复乱码说明.md

# 修复首页和登录页乱码问题说明

## 问题描述
首页和登录页出现乱码，应该显示"国语教育平台"。

## 已完成的修复

### 1. 代码层面修复
已为以下文件添加了默认值，确保即使环境变量读取失败也能显示正确标题：
- `src/views/login.vue` - 登录页
- `src/views/register.vue` - 注册页
- `src/layout/components/Sidebar/Logo.vue` - 侧边栏Logo

所有使用 `process.env.VUE_APP_TITLE` 的地方都已添加默认值：`|| '国语教育平台'`

### 2. 环境变量文件修复（需要手动操作）

如果环境变量文件有编码问题，请按以下步骤操作：

#### 方法1：使用文本编辑器重新创建文件

1. **打开 `.env.production` 文件**，确保内容如下（注意使用UTF-8编码保存）：
```env
# 生产环境配置
ENV = 'production'

# 生产环境直接使用后端地址
VUE_APP_BASE_API = '/api'

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

2. **打开 `.env.development` 文件**，确保内容如下（注意使用UTF-8编码保存）：
```env
# 开发环境配置
ENV = 'development'

# 开发环境使用代理路径 /dev-api，会通过 vue.config.js 中的代理转发到 http://localhost:30091
VUE_APP_BASE_API = '/api'

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

#### 方法2：使用命令行（PowerShell）

```powershell
cd Study-Vue-redis/study-ui

# 修复生产环境文件
@"
# 生产环境配置
ENV = 'production'

# 生产环境直接使用后端地址
VUE_APP_BASE_API = '/api'

# 生产环境标题
VUE_APP_TITLE = '国语教育平台'
"@ | Out-File -FilePath .env.production -Encoding UTF8

# 修复开发环境文件
@"
# 开发环境配置
ENV = 'development'

# 开发环境使用代理路径 /api，会通过 vue.config.js 中的代理转发到 http://localhost:30091
VUE_APP_BASE_API = '/api'

# 开发环境标题
VUE_APP_TITLE = '国语教育平台'
"@ | Out-File -FilePath .env.development -Encoding UTF8
```

## 重要提示

1. **环境变量文件必须使用 UTF-8 编码保存**
2. **修改环境变量文件后，需要重启开发服务器才能生效**
3. **即使环境变量读取失败，代码中已添加默认值，会显示"国语教育平台"**

## 验证修复

1. 重启开发服务器：
   ```bash
   npm run dev
   ```

2. 检查以下页面：
   - 登录页：标题应显示"国语教育平台"
   - 首页：标题应显示"国语教育平台"
   - 侧边栏Logo：应显示"国语教育平台"

## 如果问题仍然存在

如果修复后仍有乱码，请检查：
1. 文件编码是否为 UTF-8（无BOM）
2. 是否已重启开发服务器
3. 浏览器控制台是否有错误信息
4. 清除浏览器缓存后重新加载