Nodejs+Express开发web，为什么中文显示为乱码

Nodejs+Express开发web，为什么中文显示为乱码

最近想用NodeJS开发个人网站，可是在前台页面中文显示为乱码，不知该怎么解决？

8 回复

Nodejs + Express 开发 Web，为什么中文显示为乱码？

在使用 Node.js 和 Express 开发 Web 应用时，如果遇到中文显示为乱码的问题，通常是因为字符编码设置不正确。解决这个问题的关键在于确保所有环节的字符编码一致且正确。

常见问题及解决方案

  1. HTTP Response Headers 设置 确保 HTTP 响应头中包含正确的 Content-Type 设置，并指定字符编码（如 UTF-8）。

    app.use((req, res, next) => {
    res.header("Content-Type", "text/html; charset=utf-8");
    next();
});

  2. 模板引擎配置 如果你使用的是模板引擎（如 EJS、Pug 等），确保它们也使用正确的字符编码。

    • EJS:

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

// 设置模板引擎并指定字符编码
app.set('view engine', 'ejs');
app.engine('html', ejs.renderFile);

// 示例路由
app.get('/', (req, res) => {
    res.render('index.html', { title: '首页' });
});

app.listen(3000, () => console.log('Server running on port 3000'));

    • Pug:

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

// 设置模板引擎并指定字符编码
app.set('view engine', 'pug');

// 示例路由
app.get('/', (req, res) => {
    res.render('index', { title: '首页' });
});

app.listen(3000, () => console.log('Server running on port 3000'));

  3. 数据库连接配置 如果你在数据库中存储中文数据，确保数据库连接配置正确。例如，在使用 MongoDB 时：

    const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/mydb', {
    useNewUrlParser: true,
    useUnifiedTopology: true,
    useFindAndModify: false,
    useCreateIndex: true
}).then(() => console.log('Connected to MongoDB'))
  .catch(err => console.error('Failed to connect to MongoDB', err));

  4. 文件编码 确保你的 HTML 文件、JavaScript 文件等都是 UTF-8 编码格式。这可以通过编辑器（如 VSCode）或命令行工具来设置。

通过以上步骤，可以有效地解决 Node.js + Express 开发中的中文乱码问题。希望这些信息对你有所帮助！


视图上添加这句：

<meta charset="utf-8">

我遇到的问题是，在ejs模板里添加上面那句话没问题，但如果引用某个js，这个js里alert中文，那么这个中文就变成乱码了，这是怎么回事呢？页面上设置了utf-8编码的，引入的js文件也是utf-8格式的

早试过了，不行

把你的文件另存为下，格式为utf-8的试下呢

谢谢，成功了！！！不知道是NodeJS的原因还是Express还是ejs的原因，希望你们多多为NodeJS多做贡献。

的确是文件保存格式的问题，我用记事本编写的，后来另存为utf-8格式就不乱码了

当在使用 Node.js 和 Express 开发 Web 应用时遇到中文显示为乱码的情况，通常是由于编码设置不正确引起的。你需要确保 HTTP 响应头中的字符集编码被正确设置，并且前端页面的字符集也与之匹配。

示例代码

假设你的项目结构如下：

myapp/
├── app.js
└── views/
    └── index.ejs

app.js

首先，在 Express 应用中，需要在响应头部设置正确的字符集：

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

// 设置视图引擎
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// 设置响应头字符集
app.use((req, res, next) => {
    res.header("Content-Type", "text/html; charset=utf-8");
    next();
});

// 定义路由
app.get('/', (req, res) => {
    res.render('index', { message: '你好，世界！' });
});

app.listen(3000, () => {
    console.log('App listening on port 3000!');
});

views/index.ejs

在 EJS 模板文件中，同样需要确保 HTML 的 <meta> 标签中设置正确的字符集：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>测试页面</title>
</head>
<body>
    <h1><%= message %></h1>
</body>
</html>

解释

  • res.header("Content-Type", "text/html; charset=utf-8");：这行代码确保服务器发送给客户端的响应头中包含正确的字符集。
  • <meta charset="UTF-8">：在 HTML 文件的 <head> 部分添加此标签，确保浏览器能够正确解析 UTF-8 编码的文本。

通过以上步骤，你可以解决 Node.js + Express 应用中的中文乱码问题。确保前后端都使用相同的字符集编码（如 UTF-8），以避免乱码情况的发生。

回到顶部