17

我有以下文件位置：

file:///Users/MyName/Developer/sitename/scripts (contains all .js files..)
file:///Users/MyName/Developer/sitename/css (contains all .css files..)
file:///Users/MyName/Developer/sitename/images (contains all .jpg/png/etc. files..)
file:///Users/MyName/Developer/sitename/sitename.html
file:///Users/MyName/Developer/sitename/server.js

在里面sitename.html我加载所有必要的文件，例如：

<html>
  <head>
    <script src="scripts/somefile.js"></script>
  </head>
  ...
</html>

所以每当我打开file:///Users/MyName/Developer/sitename/sitename.html一切都很好。

但是，每当我尝试file:///Users/MyName/Developer/sitename/sitename.html通过我设置的本地 Node.js 服务器（服务器文件位置：）加载时file:///Users/MyName/Developer/sitename/server.js，如下所示：

var http = require("http"); 
var fs = require("fs");

fs.readFile('./sitename.html', function (err, html) 
{
    if (err) throw err; 

    http.createServer(function (request,response)
    {  
        // serve site
        if (request.url === "/")
        {
            response.writeHeader(200, {"Content-Type": "text/html"});  
            response.write(html);  
        }
        response.end(); 
    }).listen(8080); 
});

sitename.html已找到并加载，但所有其他应该通过它加载的文件都无法加载，因为它们都被赋予了前缀http://localhost:8080/（http://localhost:8080/scripts/somefile.js例如，不是有效的文件路径）。

看起来一旦服务器被创建（内部http.createServer(.....);），上下文就会发生变化，并且父目录现在变为http://localhost:8080/而不是file:///Users/MyName/Developer/sitename/我猜这是有道理的，但在使用仍然存储在本地的文件时不是很有帮助。

我该如何解决这个问题？我将server.js（暂时）存储在同一个目录中的事实是否让事情变得更加混乱？

谢谢！

4

3 回答 3

30

我在提供本地静态文件时发现的最简单的解决方案是使用Http-Server。

它的用法非常简单。全局安装后

 npm install http-server -g

转到您要服务的根目录

cd <dir>
http-server

而已！

于 2015-12-17T02:40:31.310 回答
11

您可以使用file://URL 加载文件，因为它是您的网络浏览器的一项功能。

加载地址时，http://localhost:8080您不再利用浏览器提供文件的能力（您正在访问 Node.js 服务器）。提供的 HTML 页面包含与当前主机名一起加载资产的相对路径。

服务资产有多种选择。

您可以使用 Node.js 提供文件：

或者，您可以使用 Web 服务器为您提供文件。这可能是性能最高的选项。这是使用 nginx 提供静态内容的示例。

于 2014-10-01T23:34:57.773 回答
5

问题是，虽然您已经为一个静态资源（sitename.html）定义了路径，但您还没有为它引用的所有其他静态资源（例如 somefile.js）定义路径。假设以下文件结构，下面包含处理加载相对于您的公共目录 (www) 的静态资源的服务器代码，而不使用外部模块。（部分取自这里）

project/
    server/    
        server.js
        dispatcher.js
    www/
        index.html
        js/ (your javascript files)
        css/ (your css files)

server.js：

var http = require('http');
http.createServer(handleRequest).listen(8124, "127.0.0.1");
var dispatcher = require('./dispatcher.js');

function handleRequest(req, res) {
    try {
        console.log(req.url);
        dispatcher.dispatch(req, res);
    } catch(err) {
        console.log(err);
    }
}

调度程序.js：

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

this.dispatch = function(request, response) {
    //set the base path so files are served relative to index.html
    var basePath = "../www";
    var filePath = basePath + request.url;

    var contentType = 'text/html';
    var extname = path.extname('filePath');
    //get right Content-Type
    switch (extname) {
        case '.js':
            contentType = 'text/javascript';
            break;
        case '.css':
            contentType = 'text/css';
            break;
    }

    //default to index.html
    if (filePath == basePath + "/") {
        filePath = filePath + "index.html";
    }

    //Write the file to response
    fs.readFile(filePath, function(error, content) {
        if (error) {
            response.writeHead(500);
            response.end();
        } else {
            response.writeHead(200, {'Content-Type': contentType});
            response.end(content, 'utf-8');
        }
    });

}
于 2015-10-02T20:19:52.663 回答