如何使用Node.js原生能力渲染搭载Metro 4 UI框架的HTML页面

核心结论 #

完全可以不依赖Express，仅用Node.js原生模块实现搭载Metro 4 UI框架的HTML页面正常渲染，你遇到的问题是代码错误和缺少静态资源处理逻辑导致的，和是否使用Express无关。

问题原因 #

1. 原生服务代码存在语法错误
   你提供的原生服务代码中fs.readFile('./${__dirname}/main.html', .html', function (err,html){一行参数完全错误，路径拼接逻辑、多余的.html参数都会导致读取文件异常。同时注意文件名大小写，Main.html和main.html在Linux等系统下会被识别为不同文件。
2. 未处理静态资源请求
   Express版本中你使用了app.use(express.static(__dirname))，会自动处理HTML中引用的CSS、JS、图片等静态资源请求。但你的原生服务不管请求URL是什么，一律返回HTML文件内容：浏览器加载完HTML后，会根据页面内的link、script标签请求Metro 4的CSS和JS文件，这时候服务返回的还是HTML，浏览器无法正确解析样式和脚本，自然不会出现正常UI效果。

修复后的原生服务代码 #

const fs = require('fs');
const http = require('http');
const path = require('path');

const server = http.createServer((req, res) => {
  // 根路径请求返回HTML页面
  if (req.url === '/') {
    fs.readFile(path.join(__dirname, 'Main.html'), 'utf-8', (err, html) => {
      if (err) {
        res.writeHead(500, { 'Content-Type': 'text/plain;charset=utf-8' });
        return res.end('服务内部错误');
      }
      res.writeHead(200, { 'Content-Type': 'text/html;charset=utf-8' });
      return res.end(html);
    });
    return;
  }

  // 处理静态资源请求
  const filePath = path.join(__dirname, req.url);
  const extName = path.extname(filePath).toLowerCase();
  
  // 匹配对应资源的Content-Type
  let contentType = 'text/plain';
  switch (extName) {
    case '.css': contentType = 'text/css'; break;
    case '.js': contentType = 'application/javascript'; break;
    case '.png': contentType = 'image/png'; break;
    case '.jpg': case '.jpeg': contentType = 'image/jpeg'; break;
    case '.ico': contentType = 'image/x-icon'; break;
  }

  fs.readFile(filePath, (err, content) => {
    if (err) {
      res.writeHead(404, { 'Content-Type': 'text/plain;charset=utf-8' });
      return res.end('请求的资源不存在');
    }
    res.writeHead(200, { 'Content-Type': contentType });
    return res.end(content);
  });
});

server.listen(7000, () => {
  console.log('服务已启动，访问地址：http://localhost:7000');
});

补充说明 #

Express的静态资源处理能力本质就是对原生Node.js能力的封装，不存在只有Express才能渲染Metro 4 UI的情况，你只需要自己实现静态资源的路径判断、类型匹配逻辑即可。

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