Vuetify v-data-table空表时连字符显示乱码的环境差异问题

问题描述 #

参与Azure部署的云端仓库管理系统开发，技术栈为Vue 2.6.8 + Vuetify 2.1.11（后续计划版本升级），遇到以下问题：

• v-data-table有数据时显示正常，但无搜索结果或无数据返回时，空状态中的连字符(-)会变成三个�乱码
• 问题仅出现在QA、测试及生产环境，本地开发环境完全正常
• 已确认所有环境均配置UTF-8编码（页面meta标签设置charset="utf-8"），数据库也采用UTF-8配置
• 此前发现谷歌字体地址变更，更新后问题仍未解决
• 除空表场景外，其他功能、字体及编码均无异常，技术栈还包含Typescript、C#、Microsoft SQL
• 已尝试更换浏览器、更新谷歌API地址、检查UTF-8编码等操作，问题依旧

补充代码 #

每页条目数配置（tableSettings.ts） #

export const ItemsPerPageOptions: number[] = [10, 25, 50, 100]; 

footerProps定义（SearchFile.ts） #

public get footerProps(): {} { 
  return { "items-per-page-options": ItemsPerPageOptions }; 
}

v-data-table使用（Vue文件） #

<v-data-table 
  :items="packageTypeBalances" 
  :headers="headers" 
  :loading="loading" 
  :footer-props="footerProps" 
  :search="search" 
  :custom-filter="searchFilter" >
</v-data-table>

排查方向建议 #

1. 检查线上环境的资源打包与编码配置
   本地正常线上异常，大概率是打包或服务器响应的编码处理不一致。可以：

• 确认打包工具（如Webpack）的output配置是否强制指定UTF-8编码
• 检查服务器返回的Content-Type响应头，是否明确包含charset=utf-8，Azure部分部署默认可能未添加该字段，导致浏览器用默认编码解析资源

2. 替换Vuetify内置空状态文本
   Vuetify 2.x的v-data-table空状态可能使用了特殊字符（如长连字符而非普通短连字符），线上环境加载的Vuetify资源编码异常会导致乱码。可以手动自定义空状态模板，用普通连字符测试：

<v-data-table ...>
  <template v-slot:no-data>
    <span>暂无数据 - 请调整搜索条件</span>
  </template>
</v-data-table>

如果自定义文本正常，说明是Vuetify内置空状态文本的编码问题。

3. 检查Azure静态资源托管配置
   若前端静态资源托管在Azure Storage或CDN上，需检查资源的Content-Type和编码设置。确保.js、.css等文件的响应头包含charset=utf-8，避免浏览器用系统默认编码解析。

4. 排查字体加载完整性
   空状态的连字符可能依赖加载的字体文件，检查线上环境字体是否加载成功（无404、跨域问题）。可通过DevTools的Elements面板查看空状态文本的字体属性，确认字体是否正常加载，若字体加载失败，浏览器 fallback的系统字体可能不支持对应字符（尤其是特殊连字符）。

5. 验证后端接口响应编码
   确认后端在无数据时返回的内容（如提示文本）编码正常，检查接口响应头的Content-Type是否为application/json; charset=utf-8，避免后端返回的字符编码与前端解析不一致。

6. 临时升级Vuetify小版本
   Vuetify 2.1.11属于较旧版本，可能存在已知的空状态编码bug。可尝试升级到2.1.x系列的最新版（如2.1.15），小版本升级风险低，若刚好修复该问题，也能为后续版本升级做铺垫。

内容的提问来源于stack exchange，提问作者Potatismoose