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

Question

我无法设置我的应用程序的中间件，以便它为我的一些静态文件提供服务，例如 css 和 js。我希望能够在我的 index.html 中包含公共目录中的 css 和 js 文件。

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 我已经公开了这个项目的 github。可用Here

编辑 2

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

解决方案：

第 1 步：

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

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

第 2 步：

一旦我这样做了，我必须按照 teleaziz 的建议更改公共路由以使用 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 不是全局对象，（尽管在文档中是全局对象下的列表，这让读者感到困惑！）。它实际上仅限于模块范围，它总是引用包含模块的文件夹。在您的情况下，服务器文件夹不是您的项目根目录，

所以看看你的文件结构让我们：

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

  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