Node.js-样式没有't应用于页面&谷歌Chrome表示:未捕获语法错误:意外的令牌<

Node.js - Styles doesn't apply to page & Google Chrome says: Uncaught SyntaxError: Unexpected token <

本文关键字:表示 语法 错误 lt 令牌 意外 Chrome amp 样式 js- Node      更新时间:2023-09-26

我开始学习node.js,并停留在一开始。我曾多次试图解决这个问题,但都没有成功。我在谷歌上搜索,堆叠浏览,发现了像我这样的问题。但不完全是这样,否则解决方案对我不起作用。请帮帮我!

我有一个简单的index.html文件,内容如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>SimpleApp</title>
  <link rel="stylesheet" type="text/css" href="styles/default.css" />
</head>
<body>
  Hello, Node!
  <script src="js/application.js"></script>
</body>
</html>  

这里是server.js文件中的一个简单服务器:

var http = require('http');
var mime = require('mime');
var fs = require('fs');
var server = http.createServer(function(request, response) {
  fs.readFile('./index.html', function(error, data) {
    if(error) {
      response.writeHead(404, {'Content-Type' : 'text/html'});
      response.end('<h1>File <index.html> not found.</h1>');
    } else {
      var contentType = undefined;
      if(request.url === '/') {
        contentType = 'text/html';
      } else {
        contentType = mime.lookup(request.url);
      }
      response.writeHead(200, {'Content-Type' : contentType});
      response.end(data);
    }
  });
});
server.listen(8000, function() {
  console.log('Server started.');
})

在我启动服务器后,样式不适用于页面&谷歌Chrome表示:未捕获语法错误:意外的令牌<
我知道fs.readFile回调内部的问题,其他内部的问题是什么?

这里有一个解决方案(需要重构):

server.js

var http = require('http');
var mime = require('mime');
var fs = require('fs');
var server = http.createServer(function(request, response) {
  var filePath = undefined;
  var contentType = undefined;
  switch(request.url) {
    case '/':
      filePath = './index.html';
      contentType = 'text/html';
      break;
    case '/styles/default.css':
      filePath = './styles/default.css';
      contentType = mime.lookup(request.url);
      break;
    case '/js/application.js':
      filePath = './js/application.js';
      contentType = mime.lookup(request.url);
      break;
    default:
      filePath = request.url;
      contentType = mime.lookup(request.url);
  }
  fs.readFile(filePath, function(error, data) {
    response.writeHead(200, {'Content-Type' : contentType});
    response.end(data);
  });
});
server.listen(8000, function() {
  console.log('Server started.');
});