设置快速启用使用静态CSS和JS文件
我在设置我的应用程序的中间件时遇到了麻烦,所以它为我的一些静态文件(如css和js)提供服务。 我希望能够包含我的index.html中公共目录中的css和js文件。
这是我目前的文件结构的图片。
这是我的快递服务器的代码。
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这个项目的公众。 它在这里可用
编辑2
这已被回答。 非常感谢Teleaziz和7zark7帮助指导我完成这个过程。
解:
步骤1:
因此,在根目录之外删除应用程序服务器代码时,问题是__dirname不是全局variables。 为我的静态文件设置路由的第一步是告诉我的服务器何时新的根目录。 我通过添加teleaziz提供的这一行代码来做到这一点
var root = path.normalize(__dirname + '/..');
第2步:
一旦我这样做,我必须改变公共路线使用根而不是__dir由teleazizbuild议
app.use(express.static(root + '/public'));
第3步:
一旦完成,我从我的index.html中删除/ public /从src中获取teleaziz和7zark7的build议。 我的新的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>
__dirname
不是一个全局对象,(尽pipe在文档中是全局对象下的列表,这让读者感到困惑!)。 它实际上仅限于模块范围,并且始终指向包含该模块的文件夹。 这是你的情况是不是你的项目根目录的服务器文件夹,
所以看看你的文件结构可以:
-
首先要求path模块帮助规范化path:
var path = require('path'); var root = path.normalize(__dirname + '/..');
-
将__dirname的使用更改为root:
app.use(express.static(root + '/public'));
从这些移除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