在 http://localhost 而不是 file:// 上查看站点，使用 node.js

Posted 2023-03-07

【中文标题】在 http://localhost 而不是 file:// 上查看站点，使用 node.js

【英文标题】：viewing site on http://localhost instead of file://, using node.js

【发布时间】：2015-01-05 03:01:10

【问题描述】：

我正在学习使用 node.js。

从file:///C:/.../myfolder/index.html 运行时，该站点看起来不错 我的 jquery 和 bootstrap 文件位于 myfolder/css/ 和 myfolder/js 目录中。

但是当我运行node index.js 并转到localhost:3000 时，找不到这些css 和js 文件。

这是我的 index.html 文件中的内容：

 <link href="/css/bootstrap.min.css" rel="stylesheet">
 <script src="/js/bootstrap.min.js"></script>
 <script src="/js/jquery.js"></script>
 <script src="/socket.io/socket.io.js"></script>

nodejs 中是否有一些我应该存储这些文件的文件夹？还是我必须在 index.js 中放一些代码来导入所有的 css 和 js 文件？

【参考方案1】：

您可以在此处简单地按照 Express.js 的快速入门说明进行操作：

https://www.npmjs.org/package/express

然后浏览到http://localhost:3000进行测试

您可以使用 Atom 文本编辑器或括号将您的文件放在 public 文件夹下并引用它们。

http://atom.iohttp://brackets.io

默认情况下，Express 使用名为 Jade 的模板引擎。您可以在这里查看：

http://jade-lang.com/

Using HTML in Express instead of Jade

Node.js + Express without using Jade

祝你好运！

【讨论】：

最接近的答案！在浏览了 express 文档后，我发现通过添加行 app.use(express.static(__dirname + '/public'));我的 css 和 js 文件夹在公共文件夹中，它可以工作。

【参考方案2】：

您的 localhost 从您机器上的特定目录开始。如果您使用 Xampp，则必须将所有服务器文件放在 C:\xampp\htdocs\ 中，以便通过 localhost URL 访问这些文件。其他一些服务器使用名为“www”的文件夹。

找到您的服务器根路径，然后将您的文件放在那里。或者创建一个从您的服务器根目录到您的文件的符号链接。

【参考方案3】：

您需要路径模块吗？

var path = require('path');

最好创建一个public 目录来存储你的文件。

public/index.html
public/css/style.css
public/js/scripts.js

【参考方案4】：

您无法访问 localhost:3000/folder/file 的原因是 localhost:port 只是一个虚拟端口。没有名为 localhost:3000/css/ 或 localhost:3000/js 的目录。

要解决这个问题，您需要使用 express 模块来配置提供静态资产的根目录。

基本上，你需要添加以下代码：

var express=require('express');
var app=express();
var path=require('path');    
app.use(express.static(path.join(__dirname,'public')));

您的静态文件目录将是 currentWorkingDirectory/public/，其中包含您的所有资产。

在您的代码中，链接任何源文件，

href='/fileName.extention'

这里是文档链接express-static-files