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不是一个全局对象，（即使在全局对象下的docs列表中，这会让读者感到困惑！）。它实际上仅限于模块范围，它总是引用包含模块的文件夹。在你的情况下是服务器文件夹，它不是你的项目根目录，

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

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

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文件

2 个答案: