Question

这是我当前的文件夹结构

css
   app.css
js
  app.js
node-modules
index.html
node-server.js
package.json

节点服务器正在托管index.html，但我无法弄清楚如何加载app.js和app.css个文件。

index.html加载：

<script src="js/app.js"></script>
<link rel="stylesheet" type="text/css" href="css/app.css"/>

以下是错误消息：

Failed to load resource: the server responded with a status of 404 (Not Found)
2http://localhost:3000/css/app.css Failed to load resource: the server 
responded with a status of 404 (Not Found)

我知道我需要或加载模块或其他东西，只是无法弄清楚是什么。

由于

Answer 1

正如Tomasz Kasperek指出的那样，您需要让Express知道您打算在静态目录中托管这些文件。这在技术上称为defining static middleware。

这应该类似于：

var express = require('express');
var app = express();

// first parameter is the mount point, second is the location in the file system
app.use("/public", express.static(__dirname + "/public"));

它非常简单，我建议你去制作某种public文件夹的路线，而不是费心去打造特定的文件和文件夹。

然后从根index.html：

简单地引用文件

<link href="public/css/reset.css" rel="stylesheet" type="text/css">

希望这能帮到你！

Answer 2

<强>原因 Node.Js不会自己为静态内容提供服务，必须定义路由以通过Node提供静态内容。

<强>解决方案（手动）：

var express = require('express'),
    path = require('path'),
    app = express();

app.get('/index.html',function(req,res){
   res.sendFile(path.join(__dirname + '/index.html')); 
});

app.get('/css/app.css',function(req,res){
    res.sendFile(path.join(__dirname + '/css/app.css')); 
});

app.get('/js/app.js',function(req,res){
    res.sendFile(path.join(__dirname + '/js/app.js')); 
});

app.get('/', function(req, res) {
    res.redirect('index.html');
});

app.listen(8080);

更好的解决方案：

目录结构：

public
 css
   app.css
 js
  app.js
 index.html

CODE：

var express = require('express'),
    path = require('path'),
    app = express();

// Express Middleware for serving static files
app.use(express.static(path.join(__dirname, 'public')));

app.get('/', function(req, res) {
    res.redirect('index.html');
});

app.listen(8080);

Answer 3

我通过使用这种语法使其工作

app.use(express.static('public'));

复制“ public”目录下的css和js文件然后在index.html文件中添加引用

<link rel="stylesheet" href="/css/reset.css">

Answer 4

//we are in ./utils/dbHelper.js, here we have some helper functions
function connect() {
  // connect do db...
}

function closeConnection() {
  // close connection to DB...
}

//let's export this function to show them to the world outside
module.exports = {
  connect(),
  closeConnection()
};

// now we are in ./main.js and we want use helper functions from dbHelper.js
const DbHelper = require('./utils/dbHelper'); // import all file and name it DbHelper
DbHelper.connect(); // use function from './utils/dbHelper' using dot(.)

// or we can import only chosen function(s)
const {
  connect,
  closeConnection
} = require('./utils/dbHelper');
connect(); // use function from class without dot

nodejs / express包括本地js文件

4 个答案: