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 = 'production'

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

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

2. 打开 .env.development 文件，确保内容如下（注意使用UTF-8编码保存）：

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

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

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

方法2：使用命令行（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. 重启开发服务器：

   npm run dev
   

2. 检查以下页面：

   • 登录页：标题应显示"国语教育平台"
   • 首页：标题应显示"国语教育平台"
   • 侧边栏Logo：应显示"国语教育平台"

如果问题仍然存在

如果修复后仍有乱码，请检查：

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