在 node express 上包含 css 和 JavaScript 文件答案

【问题标题】：include css and JavaScript file on node express在 node express 上包含 css 和 JavaScript 文件
【发布时间】：2018-07-21 13:29:28
【问题描述】：

我想在 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-code 来构建它。

【问题讨论】：

css和js文件的req url是什么？还要确保您的 css 和 js 文件位于项目的根文件夹中，名为 public
有什么更新吗？你找到解决办法了吗？

标签： javascript html node.js express visual-studio-code

【解决方案1】：

我很困惑。你用express处理静态文件，为什么不用express创建native节点服务器，express不行。

【讨论】：

【解决方案2】：

换你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);

了解官方文档app.listen() 以了解其外观。

无需创建像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') });

您可以在这里找到更多信息res.sendFile()。

我不得不说，有一种更好的方法来实现您通过switch 在app.handleRequest() 函数中实现的路由。 Routing

【讨论】：