react如何修改编码
修改 React 项目的编码配置
React 项目的编码通常由构建工具（如 Webpack 或 Vite）控制。以下是常见构建工具的配置方法：
Webpack 配置
在 webpack.config.js 中设置编码规则：
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
plugins: [
['@babel/plugin-transform-runtime', { regenerator: true }]
]
}
}
}
]
}
};Vite 配置
在 vite.config.js 中设置文件编码：
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
esbuild: {
charset: 'utf8'
}
});设置文件元编码
确保项目文件使用 UTF-8 编码：
- 在 VS Code 中通过右下角状态栏切换编码
- 在 WebStorm 中通过
File > File Encoding修改 - 添加
.editorconfig文件统一团队编码风格：root = true [*] charset = utf-8 end_of_line = lf indent_size = 2 indent_style = space
服务端编码设置
对于 SSR 项目，需确保服务端返回正确的 Content-Type：
res.setHeader('Content-Type', 'text/html; charset=utf-8');静态文件编码
HTML 模板中需声明 meta charset：
<meta charset="UTF-8" />构建输出控制
在打包配置中强制 UTF-8 输出：
new HtmlWebpackPlugin({
meta: { charset: 'utf-8' }
})
