资源文件夹中的文件未加载到子页面中

时间:2017-07-05 01:57:21

标签: node.js express

我有一个像下面这样的文件夹结构

  • 资产

    • 自举
    • CSS
      • 的style.css
    • JS
      • jquery.min.js
  • 的观点
    • 分音
      • head.ejs
      • header.ejs
      • scripts.ejs
    • home.ejs
    • user_registration.ejs

在我的app.js文件中,我将此资源文件夹设置为:

var app = express();
app.use('/static', express.static('assets'));
var routes = require('./routes/routes');

在我的routes.js档案中

exports.userLogin = function(req, res){
    var userLogin = req.params.userId;
    var users = memberData.users;
    res.render('user_registration', {
        title : 'Welcome',
        users : users
    });
};

在我的head.ejs文件中

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="static/bootstrap/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="static/css/style.css" type="text/css">

现在在user_registration文件中,我有以下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <% include partials/head.ejs %>
</head>
<body>
    <% include partials/scripts.ejs %>
</body>
</html>

通过使用我的jQuery,不会加载assets资源文件夹中的引导程序文件。但home.ejs页面正常工作 当我在控制台检查时,home.ejs页面将采用以下格式的文件 http://localhost:3000/static/bootstrap/css/bootstrap.min.css

而user_registration页面采用以下格式

http://localhost:3000/user_registration/static/bootstrap/css/bootstrap.min.css

我是express.js框架中的新手,所以我无法弄清楚如何解决这个问题。任何人都可以帮助我。谢谢。

2 个答案:

答案 0 :(得分:1)

问题在于您的代码行app.use('/static', express.static('assets'));
替换为 app.use(express.static(path.join(__dirname, 'assets')));
并在你的head.ejs文件中替换bootstrap css调用行
href="static/bootstrap/css/bootstrap.min.css"href="/bootstrap/css/bootstrap.min.css"

你明白了。

答案 1 :(得分:1)

问题是:静态资源的href链接应该是绝对的,而不是相对的。具体来说,在head.ejs中它应该是:

href="/static/bootstrap/css/bootstrap.min.css"
...
href="/static/css/style.css"

NOT:

href="static/bootstrap/css/bootstrap.min.css"
...
href="static/css/style.css"

正如app.use('/static', express.static('assets'));所述,静态资产托管在/static名称空间(以/static开头的绝对网址)下,使用相对网址没有任何意义。< / p>