React应用中重音字符显示为符号的问题求助

以下是针对该问题的排查和解决步骤，结合你已做的操作补充遗漏要点：

1. 确认文件编码为UTF-8（无BOM） #

你已设置编辑器编码为UTF-8，但需确保文件是以UTF-8无BOM格式保存：

• 在VS中打开包含重音字符的文件，点击右下角的编码标识（如"UTF-8"），选择"通过编码保存"，然后选择"UTF-8"（不要选带BOM的选项）。
• 全局设置VS：打开设置（Ctrl+,），搜索files.encoding和files.defaultEncoding，均设为utf8，关闭files.autoGuessEncoding避免自动切换编码。

2. 检查服务器响应头编码 #

即使HTML里加了<meta charset="UTF-8">，服务器返回的响应头优先级更高：

• 如果是Express等自定义服务器，确保返回HTML时设置Content-Type头：

const express = require('express');
const path = require('path');
const app = express();

app.get('/', (req, res) => {
  res.setHeader('Content-Type', 'text/html; charset=utf-8');
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(3000);

• 验证API响应：确认API返回的Content-Type包含charset=utf-8（如application/json; charset=utf-8），后端未设置的话，浏览器可能用默认编码解析导致乱码。

3. 验证打包工具的编码配置 #

如果使用Create React App，默认配置已支持UTF-8，但可手动确认或调整：

• 若 eject 过项目，检查webpack.config.js中处理JS/JSX的loader是否指定编码：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react'],
            // 确保babel处理时用UTF-8
            sourceType: 'unambiguous',
            parserOpts: {
              encoding: 'utf-8'
            }
          }
        }
      }
    ]
  }
};

4. 排查字体支持问题 #

部分字体不支持重音字符，会显示为方块或乱码：

• 在全局CSS中设置支持多语言的通用字体：

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

5. 避免危险的HTML插入 #

如果使用dangerouslySetInnerHTML插入文本，确保内容已正确编码，优先使用React原生文本渲染（直接写在JSX标签内），避免因HTML转义导致的编码问题。

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