Spr*_*der 10 html localhost relative-path file-location node.js
我有以下文件位置:
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(暂时)存储在同一目录中,使事情变得更加混乱吗？
谢谢!
hex*_*ter 20
我在提供本地静态文件时找到的最简单的解决方案是使用Http-Server.
它的用法很简单.全局安装后
npm install http-server -g
转到要提供的根目录
cd <dir>
http-server
而已!
您可以使用file://URL 加载文件,因为它是您的Web浏览器的一项功能.
加载地址时,http://localhost:8080您不再利用浏览器提供文件的能力(您正在访问Node.js服务器).正在提供的HTML页面包含相对路径,这些路径与当前主机名一起使用以加载资产.
提供资产有多种选择.
您可以使用Node.js提供文件:
或者,您可以使用Web服务器为您提供文件.这可能是性能最佳的选择.以下是使用nginx提供静态内容的示例.
问题是，虽然您已经定义了一个静态资源（sitename.html）的路径，但尚未定义它引用的所有其他静态资源（例如 somefile.js）的路径。假设以下文件结构包含处理加载相对于公共目录 (www) 的静态资源的服务器代码，而不使用外部模块。（部分摘自这里）
project/
server/
server.js
dispatcher.js
www/
index.html
js/ (your javascript files)
css/ (your css files)
服务器.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');
}
});
}
| 归档时间： |
|
| 查看次数： |
22526 次 |
| 最近记录： |