react如何修改编码

修改 React 项目的编码配置

React 项目默认使用 UTF-8 编码，但可以通过配置构建工具或编辑器来修改编码格式。以下是常见场景的解决方案：

配置 Webpack 编码
在 webpack.config.js 中设置 output.charset 和加载器的编码选项：

module.exports = {
  output: {
    charset: 'utf-8' // 修改为需要的编码如gbk
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: { presets: ['@babel/preset-env'] }
        },
        exclude: /node_modules/
      }
    ]
  }
}

配置 Babel 编码
在 .babelrc 或 babel.config.js 中指定生成文件的编码：

{
  "presets": [
    ["@babel/preset-env", { "targets": { "node": "current" } }]
  ],
  "generatorOpts": { "jsescOption": { "encoding": "utf-8" } }
}

编辑器配置
对于 VS Code，通过 .vscode/settings.json 设置文件编码：

{
  "files.encoding": "utf8",
  "files.autoGuessEncoding": true
}

HTML 元标签声明
在 public/index.html 中通过 <meta> 标签指定：

<meta charset="GB2312">

服务器响应头设置
若需后端配合，在 HTTP 响应头中添加：

Content-Type: text/html; charset=ISO-8859-1

注意事项

• 修改编码可能导致非 ASCII 字符显示异常，需确保全链路编码一致
• 现代前端工程推荐始终使用 UTF-8 编码
• 构建工具配置需结合具体版本调整语法