102 lines
2.7 KiB
Markdown
102 lines
2.7 KiB
Markdown
# 修复首页和登录页乱码问题说明
|
||
|
||
## 问题描述
|
||
首页和登录页出现乱码，应该显示"国语教育平台"。
|
||
|
||
## 已完成的修复
|
||
|
||
### 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. 清除浏览器缓存后重新加载
|
||
|