设置 express 以启用静态 css 和 js 文件

Question

我在设置我的应用程序的中间件时遇到问题，因此它无法为我的一些静态文件提供服务，例如 css 和 js。我希望能够将我的 css 和位于 public 目录内的 js 文件包含在我的 index.html .

中

This is a picture of my current file structure.

这是我的快递服务器的代码。

server.js

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

//config
app.set('views', __dirname + '');
app.engine('html', require('ejs').renderFile);
//app.use(express.static(__dirname + '/')); worked when everything was in jqtest

app.use(express.static(__dirname + '/public'));

//routes
app.get('',function(req,res){
    res.render('../public/views/index.html')
});

app.env
//server
app.listen(process.env.PORT || 5000);
console.log('app live in 5000');

这些是我试图在我的 index.html 中使用的 src 标签，但没有用。我知道我可能还需要为位于组件中的 jquery 文件设置一个额外的 app.use。

index.html

<link rel="stylesheet" type="text/css" href="/public/css/style.css"/>
<script type="text/javascript" src="/components/jQuery/dist/jquery.js"></script>
<script type="text/javascript" src="/public/js/myJS.js"></script>

编辑 1 我已经为这个项目 public 做了我的 github。可用 Here

编辑 2

已回答。非常感谢 teleaziz and 7zark7 帮助指导我完成这个过程。

解法：

第 1 步：

因此，在根目录之外删除应用程序服务器代码时出现的问题是 __dirname 不是全局变量。为我的静态文件设置路由的第一步是告诉我的服务器新根是什么时候。我通过添加 teleaziz

提供的这行代码来做到这一点

var root = path.normalize(__dirname + '/..');

第 2 步：

完成后，我必须按照 teleaziz

的建议更改 public 的路由以使用 root 而不是 __dir

app.use(express.static(root + '/public'));

第 3 步：

完成后，我按照 teleaziz 和 7zark7 的建议从 index.html 的 src 中删除了 /public/。我的新 src 标签看起来像这样。

<link rel="stylesheet" type="text/css" href="/css/style.css"/>
<script type="text/javascript" src="/components/jQuery/dist/jquery.js"></script>
<script type="text/javascript" src="/js/myJS.js"></script>

Answer 1

__dirname 不是全局对象（即使在文档中是全局对象下的列表，这会使 reader 混淆！）。它实际上仅限于模块范围，并且始终引用包含模块的文件夹。在你的情况下是服务器文件夹，它不是你的项目根目录，

因此，查看您的文件结构可以：

首先需要路径模块帮助规范化路径：

var path = require('path');
var root = path.normalize(__dirname + '/..');

将您对 __dirname 的使用更改为 root：
```
app.use(express.static(root + '/public'));
```

Answer 2

从这些中删除 public：

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

通过映射：

app.use(express.static(__dirname + '/public'));

你不需要public

设置 express 以启用静态 css 和 js 文件

Setting up express to enable the use of static css and js files

html

node.js

express