在node express上包含css和JavaScript文件_Javascript_Html_Node.js_Express_Visual Studio Code

在node express上包含css和JavaScript文件

javascript html node.js express visual-studio-code

在node express上包含css和JavaScript文件,javascript,html,node.js,express,visual-studio-code,Javascript,Html,Node.js,Express,Visual Studio Code,我想在node express中包含我的css文件和javascript文件，但我总是找不到404：下面是我的代码： 1.在server.js中 var http = require('http'); var app = require('./app'); var express = require('express'); var apps = express(); var path = require('path'); apps.use(express.static(path.join(__

我想在node express中包含我的css文件和javascript文件，但我总是找不到404：下面是我的代码： 1.在server.js中

var http = require('http');
var app = require('./app');
var express = require('express');
var apps = express();
var path = require('path');

apps.use(express.static(path.join(__dirname, 'public')));
http.createServer(app.handleRequest).listen(8000);

然后在app.js上

var url = require('url');
var fs = require('fs');

function renderHTML(path, response) {
    response.writeHead(200, { 'Content-Type': 'text/html' });
    fs.readFile(path, null, function(error, data) {
        if (error) {
            response.writeHead(404);
            response.write('File not found!');
        } else {
            response.write(data);

        }
        response.end();
    });
}

我的路线仍在app.js上：

module.exports = {
    handleRequest: function(request, response) {
        var path = url.parse(request.url).pathname;
        switch (path) {
            case '/':
                renderHTML('./index.html', response);
                break;
            case '/login':
                renderHTML('./login.html', response);
                break;
            default:
                response.writeHead(404);
                response.write('Route not defined');
                response.end();
        }
    }
};

这是我的html：

  <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Test Doc</title>
        <link rel="stylesheet" type="text/css" href="/css/style.css" />
    </head>    
    <body>
        <p>Coba ku </p>
        <div id="container" style="height: 500px"></div>
    </body>  
    </html>


测试文件
库科巴

我使用vs代码来构建它。

更改您的

server.js

var app = require('./app');
var express = require('express');
var apps = express();
var path = require('path');

apps.use(express.static(path.join(__dirname, 'public')));
apps.use(app.handleRequest);
apps.listen(8000);

学习官方文件以了解其外观

不需要创建像

renderHTML

这样的函数来提供HTML

// Instead of this:
renderHTML('./index.html', response);

// Just use that:
response.sendFile(path.join(__dirname, '../public', 'index.html'));
// or (the same):
response.sendFile('index.html', { root: path.join(__dirname, '../public') });

你可以在这里找到更多信息

我必须说，有一种更好的方法来实现路由，您已经通过

app.handleRequest（）

函数中的

switch

实现了路由

我弄糊涂了。您使用express处理静态文件，但为什么要在没有express的情况下创建本机节点服务器，express不起作用。

css和js文件的请求url是什么？还要确保css和js文件位于名为

public

的项目根文件夹中，是否有任何更新？你找到解决办法了吗？